Jquery Ajax 常用实例

目录

一. Ajax知识补充

什么是Ajax：

Ajax基本结构：

简介：

1. url：

2.  dataType：

3.  type：

4. async：

5. data：

6. contentType：

7. 常见事件

二. 常用实例

1. 拼接参数，直接调用查询请求实例

2. 非class对象参数请求实例

3. class对象参数请求实例

三. 注意

---

一. Ajax知识补充

什么是Ajax：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax基本结构：

一般即是$.ajax()的结构。下面对其常用的参数进行介绍

$.ajax({          
       	 url:"发送请求（提交或读取数据）的地址(可直接拼接参数)", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         contentType: data参数类型
         success:function(data){
            if(data.success){
                请求成功时执行
            }
         },      
         error:function(){请求失败时执行}
});

简介：

1. url：

_basePath + "请求地址"

2.  dataType：

可用类型：如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递

• xml：返回XML文本
• html：返回纯文本HTML信息。
• script：返回纯文本JavaScript代码。
• json：返回json数据。
• jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
• text：返回纯文本字符串。

3.  type：

 (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

• GET请求会向数据库发索取数据的请求，从而来获取信息，该请求就像数据库的select操作一样，只是用来查询一下数据，不会修改、增加数据，不会影响资源的内容，即该请求不会产生副作用。无论进行多少次操作，结果都是一样的。
• 与GET不同的是，PUT请求是向服务器端发送数据的，从而改变信息，该请求就像数据库的update操作一样，用来修改数据的内容，但是不会增加数据的种类等，也就是说无论进行多少次PUT操作，其结果并没有不同。
• POST请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，就像数据库的insert操作一样，会创建新的内容。几乎目前所有的提交操作都是用POST请求的。
• DELETE请求顾名思义，就是用来删除某一个资源的，该请求就像数据库的delete操作。

简单说就是

• POST /url 创建  
• DELETE /url/xxx 删除
• PUT /url/xxx 更新
• GET /url/xxx 查看

4. async：

异步方式，默认为true，即异步方式。当设置为false时，为同步方式。

• 异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
• 同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

5. data：

请求的数据，{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，也可能是请求地址已拼接参数。

6. contentType：

常见的几种情况

• "application/json; charset=utf-8"  要求data必须是json串(charset=utf-8一般可省略)
• "text/html"  对于html 
• "text/xml " 对于xml 
• "application/x-www-form-urlencoded" (默认值)

使用contentType时候要求data数据相对应,contentType同时里面可以设置数据的编码方式

7. 常见事件

$.ajax({
	url: "/url",
	type: "POST",
	dataType: "json",
	contentType: "application/json;charset=UTF-8",
	data: JSON.stringify(paraData),
	beforeSend: function () {
		// 执行前事件
	},
	success: function (result) {
		// 执行成功事件
	},
	complete: function () {
		// 执行完成事件
	},
    error: function () {
		// 执行异常事件
	}
});

二. 常用实例

1. 拼接参数，直接调用查询请求实例

//直接传参
$.ajax({
	url: _basePath + "/record/scan?code=" + viewModel.barCode + "&wkcId=" + viewModel.model.workcellId,
	dataType: 'json',
	async: false,
	success: function (result) {
		if (result.success) {  
        }
});

2. 非class对象参数请求实例

/**
 * getStringValueNotDto-字符串参数获取String返回值
 *
 * @param url 请求路径
 * @param object 参数对象
 * @author zh.y
 * @date 2019/9/2
 */
function getStringValueNotDto(url, object) {
    var value = "";
    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        data: object,
        async: false,
        success: function (args) {
            value = args;
        }
    });

    return value;
}

3. class对象参数请求实例

/**
 * getStringValue-获取String返回值
 *
 * @param url 请求路径
 * @param dto 参数对象
 * @author zh.y
 * @date 2019/9/2
 */
function getStringValue(url, dto) {
    var value = "";
    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        data: kendo.stringify(dto),
        contentType: "application/json",//controller有@RequestBody需此参数，以便解析
        async: false,
        success: function (args) {
            value = args;
        }
    });

    return value;
}

三. 注意

在Ajax请求的Controller中，参数是class对象的尽量加上@RequestBody注解，但是如果是JSON字符串传参，List的参数都要加上@RequestBody注解，才能正常解析