jquery中的$.ajax()方法參數的用法和他的含義以及超級詳細的示例

jquery中的ajax方法參數的用法和他的含義:

1.url:

  要求爲==String==類型的參數,(默認爲當前頁地址)==發送請求的地址==。javascript

2.type:

  要求爲==String==類型的參數,請求方式==(post或get)默認爲get==。注意其餘http請求方法,例如put和delete也可使用,但僅部分瀏覽器支持。html

3.timeout:

  要求爲==Number==類型的參數,設置==請求超時時間(毫秒)==。此設置將覆蓋$.ajaxSetup()方法的全局設置。java

4.async:

  要求爲==Boolean==類型的參數,默認設置爲==true==,全部請求均爲==異步請求==。若是須要發送==同步==請求,請將此選項設置爲==false==。注意,同步請求將鎖住瀏覽器,用戶其餘操做必須等待請求完成才能夠執行。jquery

5.cache:

  要求爲==Boolean==類型的參數,默認爲==true==(當dataType爲script時,默認爲false),設置爲false將不會從瀏覽器緩存中加載請求信息。web

6.data:

  要求爲==Object或String==類型的參數,發送到服務器的數據。若是已經不是字符串,將==自動轉換爲字符串格式==。==get請求中將附加在url後==。防止這種自動轉換,能夠查看==processData(防止自動轉換)選項==。對象必須爲key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組,JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。ajax

7.dataType:

  要求爲==String==類型的參數,==預期服務器返回的數據類型==。若是==不指定==,JQuery將自動根據http包mime信息==返回responseXML或responseText==,並做爲回調函數參數傳遞。可用的類型以下:   xml:返回XML文檔,可用JQuery處理。   html:返回純文本HTML信息;包含的script標籤會在插入DOM時執行。   script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),全部post請求都將轉爲get請求。   json:返回JSON數據。   jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery將自動替換後一個「?」爲正確的函數名,以執行回調函數。   text:返回純文本字符串。spring

8.beforeSend:

  這個參數主要是爲了在向服務器==發送請求前,執行一些操做==。要求爲Function類型的參數,發送請求前==能夠修改XMLHttpRequest對象==的函數,例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。 function(XMLHttpRequest){ this; //調用本次ajax請求時傳遞的options參數 }json

9.complete:

  要求爲Function類型的參數,請求完成後調用的回調函數(請求成功或失敗時均調用)。參數:XMLHttpRequest對象和一個描述成功請求類型的字符串。 function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }數組

10.success:

  要求爲==Function==類型的參數,==請求成功後調用==的回調函數,有兩個參數。 (1)由服務器返回,並根據dataType參數進行處理後的數據。 (2)描述狀態的字符串。 function(data, textStatus){ //data多是xmlDoc、jsonObj、html、text等等 this; //調用本次ajax請求時傳遞的options參數 }瀏覽器

11.error:

要求爲==Function==類型的參數,==請求失敗時被調用==的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下: function(XMLHttpRequest, textStatus, errorThrown){ //一般狀況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }

12.contentType:

要求爲==String==類型的參數,當發送信息至服務器時,內容編碼類型默認爲=="application/x-www-form-urlencoded"==。該默認值適合大多數應用場合。

13.dataFilter:

要求爲==Function==類型的參數,給Ajax返回的原始數據進行==預處理==的函數。提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }

14.global:

要求爲==Boolean==類型的參數,默認爲==true==。表示==是否觸發全局ajax事件==。設置爲false將不會觸發全局ajax事件,ajaxStart或ajaxStop可用於控制各類ajax事件。

15.ifModified:

要求爲==Boolean==類型的參數,默認爲false。==僅在服務器數據改變時獲取新數據==。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false,即忽略頭信息。

16.jsonp:

要求爲==String==類型的參數,在一個jsonp請求中==重寫回調函數的名字==。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分,例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

17.username:

要求爲==String==類型的參數,用於響應HTTP訪問認證請求的用戶名。

18.password:

要求爲==String==類型的參數,用於響應HTTP訪問認證請求的密碼。

19.processData:

要求爲==Boolean==類型的參數,默認爲true。默認狀況下,發送的數據將被轉換爲對象(從技術角度來說並不是字符串)以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息,請設置爲false。

20.scriptCharset:

要求爲==String==類型的參數,只有當請求時dataType爲"jsonp"或者"script",而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用。

文字源於:https://www.cnblogs.com/huiyuantang/p/5458278.html

代碼源於自我創做XING_Gou

實踐檢驗整理+

userList.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XING_Gou</title>
<!--引入jQuery的函數類庫  -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<!--jQuery測試  -->
<script type="text/javascript">
	//讓整個頁面加載完成.以後執行js
	$(function() {
	
	    //0.0測試jQuery函數類庫是否引入成功
		//alert("jQuery調用成功!!!");
		
		/*get post getJSON ajax   
		 業務描述:
			 當頁面在展示時,調用ajax獲取用戶數據.利用html標籤在表格中
			 展示數據.
		 */

		/**
			1.$.get(url,params,callback,dataType); 

		  	參數說明:
			  	1.url 用戶請求地址信息.
			  	2.params,用戶提交的參數,若是沒有參數時,能夠省略.
			  	3.callback 回調函數,當程序正確的獲取返回值時執行回調函數.
				4.dataType 返回值數據類型. text/json/html/script 該屬性能夠省略不寫
		 */
		$.get("/ajaxUser2", {
			"id" : "1",
			"name" : "tomcat"
		}, function(result) {
			//1.0alert("當執行回調函數時,標識業務調用正常!!!");
			//1.1利用js遍歷返回值數據
			/* for(var i=0;i<result.length;i++){
				//result返回值是數組  獲取其中的一個元素.
				var user = result[i];
				alert(user.name);
			} */

			//1.2利用jQuery的遍歷方式  
			//arg0=index表明下標 從0開始,
			//arg1=obj  表明當前正在遍歷的對象信息
			$(result).each(
					function(index, user) {
						//var user = result[index]; //obj
						var id = user.id;
						var name = user.name;
						var age = user.age;
						var sex = user.sex;
						var tr = "<tr align='center'><td>" + id + "</td><td>"
								+ name + "</td><td>" + age + "</td><td>" + sex
								+ "</td></tr>";
						//jQuery中的追加函數  append();
						$("#tab").append(tr);
					});
		});

		//2.ajax參數提交的方式  1.json串    2.key=value結構
		$.get("/ajaxUserGet", "id=1&name=tomcat", function(result) {

		});
        
		$.post("/ajaxUserPost", "id=1&name=tomcat", function(result) {

		});

		//3.動態獲取的遠程的 1JSON串   2JSON對象 3JS對象
		//問題:result 後臺服務器返回的JSON串,問題JS竟然能夠 result.屬性調用.
		$.getJSON("/ajaxGetJSON", "id=1&name=tomcat", function(result) {
			//利用jQuery進行數據的轉化.
			var userList = $(result)
		});

		//ajax的調用是最爲根本的方式.$.ajax能夠實現用戶的所有的需求.
		//例如:設定成功/失敗的調用方式.2能夠設定請求頭信息  3.能夠設定字符集編碼格式
		//設定調用是否同步/異步.  該方法的功能最爲強大.

		//定義了js對象  {key:value}
		/* function user  = {
			id:1,
			name:"tomcat",
			sex:"男"
		} */
		$.ajax({
			url : "/ajaxUser",       //請求地址信息
			type : "get",            //請求方式
			//method:"get",
			data : {id : 1},         //請求參數
			dataType : "json",       //返回值結果 要求JSON串
			                         //成功的回調
			success : function(result) {
				$(result).each(
						function(index, user) {
							//var user = result[index]; //obj
							var id = user.id;
							var name = user.name;
							var age = user.age;
							var sex = user.sex;
							var tr = "<tr align='center'><td>" + id
									+ "</td><td>" + name + "</td><td>" + age
									+ "</td><td>" + sex + "</td></tr>";
							//jQuery中的追加函數  append();
							$("#tab").append(tr);
						});
			},
			                           //報錯回調
			error : function(result) {
				alert("後臺服務器異常!!!!!!");
			}
		});

	})
</script>
</head>
<body>
	<table id="tab" border="1px" width="65%" align="center">
		<tr>
			<td colspan="6" align="center"><h3>學生信息</h3></td>
		</tr>
		<tr>
			<th>編號</th>
			<th>姓名</th>
			<th>年齡</th>
			<th>性別</th>
		</tr>
	</table>
</body>
</html>

在jsp中,你能夠從0.0開始起步,到後面的3,我相信你將會有很是多的收穫

$.ajax()

ajax的調用是最爲根本的方式.$.ajax能夠實現用戶的所有的需求. 例如:

  • 1.設定成功/失敗的調用方式.
  • 2.能夠設定請求頭信息
  • 3.能夠設定字符集編碼格式設定調用是否同步/異步. 該方法的功能最爲強大.

UserController

package com.jt.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.jt.demo.pojo.User;
import com.jt.demo.service.UserService;

@Controller
@RequestMapping("/")
public class UserController {

	@Autowired
	private UserService userService;
	
	/**
	 * 實現ajax頁面跳轉
	 * @return
	 */
	@RequestMapping("/ajax")
	public String ajax() {
		return "userAjax";
	}
	
	/**
	 * 接收ajax的用戶請求
	 * url:ajaxUser
	 * 參數:沒有省略
	 * 返回值:用戶列表信息
	 */
	@RequestMapping("/ajaxUser")
	@ResponseBody  //將數據轉化爲json格式
	public List<User> findAjaxUser(){
		
		return userService.findAll();
	}
}

在代碼中我只測試了$.get()和.ajax() 其他方法基本一致,若想測試更改@RequestMapping("/ajaxUser")中路徑url或從新添加皆可

相關文章
相關標籤/搜索