ajax请求的同步和异步操作

来源：互联网发布：北外网络教育作业答案编辑：程序博客网时间：2024/05/08 05:52

运行次序，先跳出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>

0 0