關於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);
}
}
總結:強烈建議使用