javascript无限请求_SockJS - >重新连接后无限xhr-streaming呼叫
时间: 2024-06-01 22:08:51 浏览: 15
这个问题可能是由于以下原因之一导致的:
1. 服务器端没有正确地关闭连接,导致客户端无法重新连接。你可以尝试在客户端代码中添加一个断开连接的方法,确保在重新连接之前关闭连接。
2. 客户端代码中可能存在错误,导致无限请求。你可以检查代码并确保没有循环调用连接或发送请求的代码。
3. 可能存在网络问题,导致连接断开并重新连接。你可以检查网络连接并尝试在不同的网络环境中测试。
4. 可能存在服务器端的限制,导致客户端无法成功连接。你可以与服务器管理员联系以获取更多信息。
除了上述原因之外,还有其他可能导致这个问题的因素。如果以上建议无法解决问题,你可以提供更多细节信息,以便更好地诊断和解决问题。
相关问题
sockjs-client 跨域
sockjs-client是一个用于在Web浏览器和服务器之间进行实时通信的JavaScript库。在跨域访问的环境下,sockjs-client提供了一种可靠且高效的解决方案。
跨域是指在浏览器中访问不同域上的资源。由于浏览器的同源策略限制,JavaScript在一个域中不能直接访问其他域的资源。然而,通过使用sockjs-client,我们可以在跨域环境下进行实时通信。
sockjs-client使用WebSocket作为主要传输协议,但在不支持WebSocket的浏览器中,它会自动回退到其他传输方式,如XHR流。这意味着无论浏览器是否支持WebSocket,sockjs-client都可以在跨域环境中发送和接收实时数据。
为了允许跨域访问,服务器需要配置CORS(跨域资源共享)。在服务器端,我们需要在响应中包含适当的CORS头,以允许浏览器从其他域访问服务器资源。这通常涉及到在服务器配置中添加一些特定的响应头,如"Access-Control-Allow-Origin"。
在sockjs-client中,我们只需要在JavaScript中创建一个SockJS客户端实例,并指定服务器URL。sockjs-client将为我们处理所有跨域访问和实时通信的细节。
总而言之,sockjs-client是一个能够在跨域环境下让浏览器与服务器进行实时通信的JavaScript库。它利用WebSocket和其他传输机制,提供了一种高效和可靠的解决方案。要在跨域环境下使用sockjs-client,服务器需要配置CORS头以允许跨域访问。通过使用sockjs-client,我们可以轻松地在跨域环境中实现实时通信。
<td contenteditable="true" id="cell_1_1"><input type="text" oninput="filterTable(1)" placeholder="aoiStep" id="input_1_1"></td> <td contenteditable="true" id="cell_1_2"><input type="text" oninput="filterTable(2)" placeholder="defectType" id="input_1_2"></td> <td contenteditable="true" id="cell_1_3"><input type="text" oninput="filterTable(3)" placeholder="layerCode" id="input_1_3"></td> <td contenteditable="true" id="cell_1_4"><input type="text" oninput="filterTable(4)" placeholder="type"id="input_1_4"></td> <td contenteditable="true" id="cell_1_5"><input type="text" oninput="filterTable(5)" placeholder="dpet" id="input_1_5"></td> <td contenteditable="true" id="cell_1_6"><input type="text" oninput="filterTable(6)" placeholder="subcode" id="input_1_6"></td> <td contenteditable="true" id="cell_1_7"><input type="text" placeholder="codeDescription" id="input_1_7"></td> <td contenteditable="true" id="cell_1_8">image1</td> <td contenteditable="true" id="cell_1_9">image2</td> <td contenteditable="true" id="cell_1_10">image3</td> <td contenteditable="true" id="cell_1_11">image4</td> <td contenteditable="true" id="cell_1_12">image5</td> <td contenteditable="true" id="cell_1_13"><input type="text" placeholder="determination_rule"id="input_1_8"></td> function submitData(button) { var row = button.parentNode.parentNode; var aoiStep = row.querySelector("#input_1_1").value; var defectType = row.querySelector("#input_1_2").value; // 获取其他列的数据... // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 处理返回的结果 var result = xhr.responseText; console.log(result); } }; // 发送POST请求 xhr.open("POST", "insert.php", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 将表格数据作为请求参数发送到后端 var data = "aoiStep=" + encodeURIComponent(aoiStep) + "&defectType=" + encodeURIComponent(defectType) + "&..."; xhr.send(data); } 这是我表格的表头,和链接数据库的代码我已经在数据库创建了表,以及对应的字段,现在要实现在数据库中显示我网页添加的详细文字内容,以及将图片存放到本地文件夹后生成唯一的图片文件名,并且将图片路几个保存在数据库,我需要对上面代码进行怎样的修改
要实现在数据库中显示网页添加的详细文字内容以及保存图片文件名和路径,你需要对代码进行以下修改:
1. 在 `submitData` 函数中,获取其他列的数据并构建请求参数时,添加图片文件的处理。修改代码如下:
```javascript
function submitData(button) {
var row = button.parentNode.parentNode;
var aoiStep = row.querySelector("#input_1_1").value;
var defectType = row.querySelector("#input_1_2").value;
// 获取其他列的数据...
// 创建 FormData 对象,用于存储表格数据和图片文件
var formData = new FormData();
formData.append("aoiStep", aoiStep);
formData.append("defectType", defectType);
// 添加其他表格数据...
// 添加图片文件到 FormData 对象
var image1File = row.querySelector("#input_1_8").files[0];
formData.append("image1", image1File);
// 添加其他图片文件...
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理返回的结果
var result = xhr.responseText;
console.log(result);
}
};
// 发送 POST 请求
xhr.open("POST", "insert.php", true);
xhr.send(formData);
}
```
在上述代码中,我们使用 `FormData` 对象来存储表格数据和图片文件。首先创建一个 `FormData` 对象,并使用 `formData.append()` 方法添加表格数据(例如 `aoiStep` 和 `defectType`)到对象中。然后,通过查询表单元素的方式获取图片文件,并将其添加到 `FormData` 对象中。
2. 修改 PHP 后端代码 `insert.php`,以保存图片文件并将图片路径存储到数据库中。具体修改方式如下:
```php
// 获取表单提交的数据
$aoiStep = $_POST['aoiStep'];
$defectType = $_POST['defectType'];
// 获取其他表格数据...
// 获取图片文件并保存到指定文件夹
$image1Name = uniqid() . '_' . $_FILES['image1']['name'];
$image1Path = "path/to/save/" . $image1Name;
move_uploaded_file($_FILES['image1']['tmp_name'], $image1Path);
// 获取其他图片文件并保存...
// 执行数据库插入操作
$sql = "INSERT INTO tms_jianben (aoi_step, defect_type, layer_code, type, dpet, subcode, code_description, image1_path, image2_path, image3_path, image4_path, image5_path, determination_rule) VALUES ('$aoiStep', '$defectType', '$layerCode', '$type', '$dpet', '$subcode', '$codeDescription', '$image1Path', '$image2Path', '$image3Path', '$image4Path', '$image5Path', '$determinationRule')";
// 执行数据库插入操作...
```
在上述代码中,我们获取表单提交的数据(例如 `aoiStep` 和 `defectType`),然后获取图片文件并将其保存到指定文件夹。我们使用 `uniqid()` 函数生成唯一的图片文件名,并通过 `move_uploaded_file()` 函数将图片文件移动到指定文件夹。
接下来,在数据库插入操作的 SQL 语句中,将图片路径(例如 `$image1Path`)存储到对应的字段中。
请注意,你需要将 `"path/to/save/"` 替换为你想要保存图片的实际文件夹路径。
这样,当你点击提交按钮时,表格数据和图片文件将会被发送到后端 PHP 脚本进行处理,并将图片路径存储到数据库中。
希望这个修改对你有所帮助!如果你还有其他问题,请随时提问。