ajax请求的同步和异步操作

柔光的暖阳◎ 2022-09-30 13:45 213阅读 0赞

运行次序，先跳出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="返 回" οnclick="history.go(-1)"/>  
</div>  
</form>  
<c:set var="myString" value="hello peter"/>  
$\{fn:contains(myString, "hello")\}  
</body>  
</html>