ajax请求即时输出服务端响应结果代码示例
以下是使用jQuery发送AJAX请求并实时输出服务器响应的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX实时输出示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').on('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
$.ajax({
type: 'POST',
url: '/your-server-endpoint', // 替换为你的服务器端点
data: $(this).serialize(), // 序列化表单数据
success: function(response) {
// 请求成功时的回调函数
$('#response-content').text(response);
},
error: function(xhr, status, error) {
// 请求失败时的回调函数
$('#response-content').text("Error: " + error);
}
});
});
});
</script>
</head>
<body>
<form id="myForm">
<!-- 表单元素 -->
<input type="text" name="message" />
<button type="submit">发送</button>
</form>
<div id="response-content">响应内容将实时显示在这里</div>
</body>
</html>在这个例子中，当用户提交表单时，AJAX请求会发送到服务器。成功接收响应后，响应内容会实时更新到页面上的<div id="response-content">元素中。如果请求失败，将显示错误信息。这个例子使用了jQuery库来简化AJAX请求的编写。
评论已关闭