运行次序,先跳出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">
<!-- <label class="input-label" for="password">密码</label> -->
<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>