jQuery ---在Ajax中的应用

$.get()

$.post()

$.getScript()

$.getJSON()

$.ajax()

序列化元素

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第二层是load()，$.get()和$.post()方法，第三次是$.getScript()和$.getJSON()方法。

$.get()

该方法使用GET方法进行异步请求。

参数

url 请求的HTML页的URL地址

data(可选) Object类型，发送到服务器的key/value数据作为String附加到请求URL中

扫描二维码关注公众号，回复： 3467928 查看本文章

callback(可选) 载入成功的回调函数

type(可选) 服务器端返回内容的格式(期待服务器端返回的数据格式并不是设置)

$('button').click(function(){
    $.get('test.json',function(data){
            $.each(data,function(index,item){
                    html+='<div><p>'+item["username"]+'</p><p>'+item["age"]+'</p></div>'
               });
            $('body').append(html);
    });
});
<button>加载</button>

**:如果本地访问JSON文件则不要使用谷歌(存在跨域问题)

$.post()

该方法与get()请求参数与使用方法相同，但也有区别:

1.GET请求会将参数跟URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送到Web服务器。

2.GET请求方式对传输的数据大小有限制(2KB)，而POST方式传递的数据量比GET方式大得多。

3.GET方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史记录中读取，因此安全性很低，而POST方式相对可以避免这些问题。

4.GET方式和POST方式传递的数据在服务器端的获取不同。

$.getScript()

该方法用于直接加载js文件，而且加载完后javascript文件会自动执行。

$.getJSON()

该方法用于加载JSON文件，与$.getScript()方法的用于相同。

$('button').click(function(){
    $.getJSON('test.json',function(data){
            $.each(data,function(index,item){
                    html+='<div><p>'+item["username"]+'</p><p>'+item["age"]+'</p></div>'
               });
            $('body').append(html);
    });
});
<button>加载</button>

$.ajax()

常用的参数

url 发送请求的地址，字符串类型

type 请求方式(POST或GET)默认GET.

data 发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。

dataType 预期服务器返回的数据类型，如果不指定，将自动根据HTTP包MIME信息返回responseText

complete 请求完成后，调用的回调函数(无论成功或失败)

success 请求成功时调用的回调函数，参数data(处理后的数据),textStatus(描述状态)

error 请求失败时调用的函数。

timeout 设置请求超时间。

$('button:contains(加载数据)').click(function() {
     $('.user').empty();
     $('<tr><td>编号</td><td>姓名</td><td>性别</td><td>操作</td></tr>').appendTo('.user');
        $.ajax({
            url: 'http://120.78.164.247:9999/user/findAll',
            mthod: 'get',
             dataType: 'JSON',
             success: function(res) {
             console.log(res);
            res.data.forEach(function(element, index) {
                        // statements   
            $('<tr><td><input type="checkbox"  value="' + element.id + '" ></td><td>' 
                +element.name + '</td><td>' + element.gender + 
                '</td><td><button>删除</button></td></tr>').appendTo('.user');
                });
            },
            error: function() {}
     });
 })

序列化元素

serialize()

该方法作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串

		$(function(){
			$('#send').click(function(){
				var $result=$("#form1").serialize();
				console.log($result);
				
			});
		})
	<form id="form1">
		<label for="username">姓名:</label>
		<input type="text" name="username" id="username">
		<label for="age" >年龄:</label>
		<input type="text" name="age" id="age">
		<input type="button" value="提交" id="send">
		<!-- <button id="send">提交</button> -->
	</form>

**:复选框和单选框的值序列化为字符串形式，只会将选中的值序列化。

serializeArray()

将DOM元素系列化后，返回JSON格式的数据。

		$(function(){
			$('#send').click(function(){
				var $result=$("#form1").serializeArray();
				console.log($result);
				
			});
		})

$.param()

用来对一个数组或对象按照key/value进行序列化。

var arr={a:1,b:2,c:3};
var $result=$.param(arr);
console.log($result); //a=1&b=2&c=3