jquery中的$.ajax()方法参数的用法和他的含义以及超级详细的示例

时间 2020-07-27

标签 jquery ajax 方法参数用法含义以及超级详细示例栏目 JQuery 繁體版

原文原文链接

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或从新添加皆可