ajax请求的同步和异步操作

最新推荐文章于 2025-07-11 17:56:15 发布

petercnmei

最新推荐文章于 2025-07-11 17:56:15 发布

阅读量842

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp & html javascript

本文链接：https://blog.youkuaiyun.com/petercnmei/article/details/64920114

jsp & html 同时被 2 个专栏收录

49 篇文章

订阅专栏

javascript

45 篇文章

订阅专栏

本文介绍如何在JavaScript中实现Ajax同步请求，并确保代码按预期顺序执行。通过修改$.get方法为$.ajax并设置async:false，或者全局设置async为false，使前端能够等待后台响应后再继续执行后续代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行次序，先跳出ajax click
再到后台运行testAjax
然后再跳出end
最后运行function中的alert(data)，跳出testAjax bbbbbbbbbbbbb

原因，$.get操作，暂时没查到同步的参数，所以跳过function，直接运行后面代码，后面代码完成后，再执行function
$(function () {
$("#ajax").click(
function () {
alert("ajax click");
$.get("${pageContext.request.contextPath}/testAjax", function (data) {
alert(data);
});
alert("end");
})
})
改用同步方法如下一：
$(function () {
$("#ajax").click(
function () {
alert("ajax click");
$.ajax({
url: '${pageContext.request.contextPath}/testAjax',
type: 'get',
async: false,//使用同步的方式,true为异步方式
// data : {'act':'addvideo', 'videoname':videoname},//送到服务器的参数，这里使用json对象
success: function (data) {
alert(data);
},
fail: function () {
alert("fail");
}
});
alert("end");
})
})

这才是完整的ajax请求， async: false才能使得程序按顺序运行

方法如下二：

$(function () {

$.ajaxSetup({
    async : false //加上这个也能同步运行
});

$("#ajax").click(
function () {
alert("ajax click");
$.get("/peterWebDemo/testAjax", function (data, status) {
if (status == "success") alert(data);
else
alert("fail");
});
alert("end");
})
})

------------------------------------后台controller-----------------------------------------------

@RequestMapping(value = {"testAjax"})
public void testAjax(HttpServletRequest request, HttpServletResponse response, Model model) throws IOException {
System.out.println("***************************** LoginController testAjax");
PrintWriter out = response.getWriter();
out.print("testAjax bbbbbbbbbbbbb");
out.flush();
out.close();
// return "aaaaa";
}
-----------------------------------前台-------------------------------------------------
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<script src="${pageContext.request.contextPath}/static/jquery/jquery-1.9.1.min.js"></script>
<html>
<head>
<title>BrchMng管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript">

$(function () {
$("#ajax").click(
function () {
alert("ajax click");
$.get("${pageContext.request.contextPath}/testAjax", function (data) {
alert(data);
});
alert("end");
})
})
</script>
</head>
<body>
<form id="inputForm" action="${pageContext.request.contextPath}/login" method="post" class="form-horizontal">

<div class="control-group">
<label class="control-label">登陆12名：</label>
<div class="controls">
<input name="username" htmlEscape="false" maxlength="255" class="input-xlarge "/>
</div>
</div>
<div class="control-group">
<label class="control-label">密码：</label>
<div class="controls">

<input type="password" id="password" name="password" class="input-block-level required">
</div>
</div>
<div class="form-actions">
<input id="btnSubmit" class="btn btn-primary" type="submit" value="登陆"/>
<input id="ajax" class="btn btn-primary" type="button" value="ajax"/>
<input id="btnCancel" class="btn" type="button" value="返回" onclick="history.go(-1)"/>
</div>
</form>
<c:set var="myString" value="hello peter"/>
${fn:contains(myString, "hello")}
</body>
</html>