目录
一. 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注解,才能正常解析