Jquery书写ajax
根据API学习本章
Jquery书写ajax
使用ajax发送表单到servlet，发送时显示等待图片，servlet处理完返回信息，在页面显示返回信息，并且隐藏等待图片
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ajax.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("#submit").click(
function() {
var param = {
name : $("#name").val(),
age : $("#age").val()
};
$.ajax({
type : "GET",
url : "oneServlet",
cache : false,
data : param,
beforeSend : function() {// 在发送请求之前触发的事件
$("img").show();
},
complete : function() {// 在发送请求完成之后触发的事件
$("img").hide();
},
success : function(data) {// 在请求成功后触发的事件
alert(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {// 在请求失败时候触发
alert(XMLHttpRequest.status + " " + textStatus + " "+ errorThrown);
}
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr><td align="right">user name:</td><td><input type="text" id="name"></td></tr>
<tr><td align="right">age:</td><td><input type="text" id="age"></td></tr>
<tr><td></td><td><input type="button" id="submit" value="submit" ></td></tr>
</table>
<img src="img/wait.gif" style="display:none">
</form>
</body>
</html>
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
/*try {
Thread.sleep(5000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}*/
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
String age=request.getParameter("age");
out.print(name+" "+age);
out.flush();
out.close();
}
jQuery中ajax的应用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
var param={"name":"张三","age":"33" };
$.get("oneServlet",param,function(data){
alert(data);
});
});
$("button:eq(1)").click(function(){
$.getJSON("json/name.json",function(data){
alert(data);
for(var i=0;i<data.length;i++){
var map=data[i];
alert(map.name+" "+map.age);
}
});
});
$("button:eq(2)").click(function(){
$.getScript("js/aa.js");
});
$("button:eq(3)").click(function(){
var param={"name":"张三","age":33 };
$.post("oneServlet",param,function(data){
alert(data);
});
});
$("button:eq(4)").click(function(){
$("div").load("index.jsp");
});
});
</script>
</head>
<body>
<button>get</button><br>
<button>getJSON</button><br>
<button>getScript</button><br>
<button>post</button><br>
<button>load</button><br>
<div></div>
</body>
</html>
其中：
son/name.json
[{
"name":"zhangsan",
"age":"22"
},{
"name":"wangwu",
"age":"33"
},{
"name":"lisi",
"age":"44"
}]
js/aa.js
alert("aaaaaaaaaa");
