jquery $.get()、$.ajax()與後臺servlet交互方法

時間 2020-06-11

標籤 jquery ajax 後臺 servlet 交互方法欄目 JQuery 简体版

原文原文鏈接

jquery中load（）方法一般從web服務器獲取靜態文件，若是須要傳遞一些參數給服務器中的頁面，那麼可使用$.get()或者$.post()或者底層的$.ajax()方法。javascript

$.get(url, data, callback, type）參數介紹以下：html

1.url：請求的URL.java

2.data:發送至服務器的key/value數據附加到URL中。jquery

3.callback：載入成功時的回調函數（response返回狀態爲成功時調用該函數）自動將請求結果和狀態傳遞給該方法。web

4.服務器返回內容的格式。ajax

舉例：點擊一個按鈕將一個字符串從客戶端傳到服務器，經服務器處理後返回新的字符串。服務器

jsp代碼：app

<body>
<input type="button" id="send" value="AJAX獲取"/>
<div id="resText"></div>
</body>

javascript代碼：jsp

<script type="text/javascript">
$(function(){
	$("#send").click(function(){
		var str = "test";
		$.get("AjaxServlet", {name : str},  function(responseText, textStatus){
			if(textStatus == "success")
			    $("#resText").text(responseText);
			if(textStatus == "error")
			    alert("Error");

		});
	});
});
</script>

建立servlet類AjaxServlet，doget（）函數代碼以下：ide

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("name");
		response.setContentType("text/html");
		PrintWriter writer = response.getWriter();
		writer.println("helloworld" + name);
	}

servlet配置：

<servlet>
      <servlet-name>AjaxServlet</servlet-name>
      <servlet-class>org.AjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>AjaxServlet</servlet-name>
      <url-pattern>/AjaxServlet</url-pattern>
  </servlet-mapping>

啓動程序後點擊按鈕就返回了新的字符串

$.ajax()方法是jQuery最底層的Ajax實現，所以能夠用它代替$.get()方法。

上例中js代碼變爲：

$(function(){
	$("#send").click(function(){
		var ajaxdata = {
				name : "xiaoli",
				psd : "123"
			};
		$.ajax({
			url : "AjaxServlet",
			type : "GET",
			data : ajaxdata,
			success : function(responseText, textStatus){
				$("#resText").text(responseText);
			},
			error : function(){
				alert("error");
			}
		});
	});
});