关于前端接口 jquery的ajax请求
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了关于前端接口 jquery的ajax请求，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4287字，纯文字阅读大概需要7分钟。
内容图文
关于jquery中ajax请求
一.ajax语法
$.ajax({键值对});
$.ajax({
//四种请求方式大写 GET POST PUT DELETE
type: "POST",
//接口地址或发送请求的地址
url: "http://localhost:9015/u9 api/"，
//如果接口指定有发送请求头，那么需要写headers
headers: { "键 ":"值" },
//默认异步true, 同步为false。
aysn:true,
//发送到服务器的数据，如果是json数据，需要数据转换为 data:JSON.stringify(对象名), 或data:JSON.stringify({键：值})
data: { "键 ":"值" }，
//服务器返回数据类型，此行默认可以不写，如是json格式需要写明 dataType:"json"
dataType: "json",
//向服务器发送的编码类型，此行默认可以不写。如果是json格式需要写明 contentType:"application/json;charset=UTF-8"
contentType:"application/x-www-form-urlencoded",
//接口成功函数，就可以在此对data数据进行操作
success:function(data){ console.log("成功"); },
//返回错误信息
error:function(message){ console.log(message); }
});
二. 四种请求方式
最基本的方法有4种，分别是GET，POST，PUT，DELETE。
get是从服务器上获取数据，post是向服务器传送数据。get和post只是一种传递数据的方式，get也可以把数据传到服务器。
1.get请求
GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，多个参数用&连接
url=http://XXX.com？name=zhangsan&password=123456
GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变
var a={ u_id:1 , as_phone:"15611589313" };
$.ajax({
url:"http://localhost:9015/u9_app_api/cart?u_id="+$("#u_id").val(),
type:"GET", //此行可以不写，默认就是get方式
success:function(data){
console.log("成功");
}
});
2.post请求
POST的安全性要比GET的安全性高，
（1）因为get方式用户名和密码明文出现在url上面。
（2）登录页面有可能被浏览器缓存。
（3）其他人查看浏览器的历史纪录，那么就可以拿到你的账号和密码了，
2.1 默认格式
var user={ u_name:"15611589313" , u_pwd:"123456aa"};
$.ajax({
url:"http://localhost:9015/u9_app_api/coupons_orders",//sale_services",
type:"POST",
data:user,
success:function(data){
console.log("成功");
}
});
2.2 json格式请求
var user={ u_name:"15611589313" , u_pwd:"123456aa"};
$.ajax({
url:"http://localhost:9015/u9_app_api/coupons_orders",//sale_services",
type:"POST",
data:JSON.stringify(user),
dataType:"json",
contentType:"application/json", //json格式这三行必须有
success:function(data){
console.log("成功");
}
});
2.3 序列化表单值
$.ajax({
type: "POST",
url:'http://192.168.10.16:8081/u9_app_api/imgs/imgupload',
data:$("#editFormu").serialize(), // 你的form表单id
success: function(data) {
console.log("成功");
},
error: function(message) {
console.log(message);
}
});
serialize() 方法通过序列化表单值，创建URL编码文本字符串。您可以选择一个或多个表单元素(比如 input或文本框），或者 form 元素
本身。序列化的值可在生成 AJAX 请求时用于URL 查询字符串中。
语法：$(selector).serialize( )
输出：a=1&b=2&c=3&d=4&e=5
注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的
值包含到序列字符串中，元素必须使用 name 属性。
2.3 FormData
3.put请求
同上
4.delete 请求
同上
三、常用的状态码
◆ 200 (OK): 找到了该资源，并且一切正常。
◆ 304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
◆ 401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码，以登录到服务器。
◆ 403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。
◆ 404 (NOT FOUND): 在指定的位置不存在所申请的资源。
◆ 500 服务器错误
四、重新加载数据
table.ajax.reload();
jquery 的 DataTables 表格插件
关于此插件用法，参考https://blog.csdn.net/qq_32048015/article/details/99663573
和 https://www.cnblogs.com/jobs2/p/3431567.html
4.1 每30秒重新加载表数据(分页重置)
var table = $('#example').DataTable( {
ajax: "data.json"
} );
setInterval( function () {
table.ajax.reload();
}, 30000 );
4.2 每30秒重新加载表数据(分页留存)
var table = $('#example').DataTable( {
ajax: "data.json"
} );
setInterval( function () {
table.ajax.reload( null, false ); // 刷新表格数据，分页信息不会重置
}, 30000 );
4.3 使用回调函数来更新外部元素
var table = $('#example').DataTable();
table.ajax.reload( function ( json ) {
//这里的json返回的是服务器的数据
$('#myInput').val( json.lastInput );
} );
内容总结
以上是互联网集市为您收集整理的关于前端接口 jquery的ajax请求全部内容，希望文章能够帮你解决关于前端接口 jquery的ajax请求所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。