关于前端接口 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 );
} );