关于JQuery的Ajax操作方式有三种,规范之前的JQuery操作
1.$.ajax
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax原生函数</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sendBtn").on("click",function(){
var msgValue=$("#msg").val() ; //取得信息
$.ajax({
url : "EchoServlet" , //Ajax提交路径
data : { //传递的参数
"msg" : msgValue ,
"eid" : 666 ,
"time" : new Date()
} ,
type : "post" , //发送类型
dataType : "json" , //返回值类型,
success : function(json){ //回调函数
$("#contentDiv").append("<p>姓名:"+json.members[0].name+",年龄:"+json.members[0].age+"</p>") ;
} ,
error :function(){ //异常处理函数
alert("对不起,操作出现了异常,无法连接!");
}
});
}) ;
});
</script>
</head>
<body>
请输入内容:<input type="text" name="msg" id="msg">
<input type="button" value="发送" id="sendBtn">
<div id="contentDiv"></div>
</body>
</html>2.$.post
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>POST简化Ajax操作</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sendBtn").on("click",function(){
var msgValue=$("#msg").val() ; //取得信息
$.post("EchoServlet",{"msg":msgValue,"eid":888,"time":new Date()},function(json){
$("#contentDiv").append("<p>姓名:"+json.members[0].name+",年龄:"+json.members[0].age+"</p>") ;
},"json");
} );
});
</script>
</head>
<body>
请输入内容:<input type="text" name="msg" id="msg">
<input type="button" value="发送" id="sendBtn">
<div id="contentDiv"></div>
</body>
</html>3.$.get
因为操作和POST请求差不多,就不在过多解释
Servlet代码
package cn.zzu.wcj.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns="/EchoServlet")
public class EchoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//请求和响应都要设置编码才能解决乱码
req.setCharacterEncoding("UTF-8") ;
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html");
System.out.println("msg="+req.getParameter("msg"));
System.out.println("eid="+req.getParameter("eid"));
resp.getWriter().print("{\"members\":[{\"name\":\"张三\",\"age\":\"30\"}]}");
}
@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doGet(req, resp);
}
}
总结:强烈建议使用