携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

jQuery中的Ajax

jQuery中的Ajax

jQuery中的Ajax

jQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装。jQuery提供了六个Ajax操作的方法:

• load()方法
• $.get()方法和$.post()方法
• $ajax()方法
• $.getScript()方法和$.getJSON()方法

jQuery除了封装了六个Ajax操作的方法，还提供了以下几种事件:

• ajaxStart()和ajaxStop()事件
• ajaxComplete()事件、ajaxSend()事件、ajaxEccor()事件和ajaxSuccess()事件

load()方法

load()方法是jQuery中最为简单的Ajax方法，其语法结构如下:

$element.load(url,[data],[callback]);

• url:请求HTML页面的ur地址。
• data:发送给服务器端的key/valuie形式的数据内容。
• calback: Ajax请求完成时的回调函数。

$('button').click(function(){
	$('div').load('serxer.js');
});

注意: load()方法的请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。

$.get()与$.post()方法

• $.get()方法使用GET方式向服务器端发送异步请求。其语法结构如下:

$.get(url,[data],[callback],[type]);

• udl:请求HTML页面的url地址。
• data:发送给服务器端的key/value形式的数据内容。
• callback: Ajax请求完成时的回调函数。
• type:设置返回数据内容的格式。值为xml、html、script、json、text和_default。

$('button').click(function(){
    $.get('server.is',function(data, textStatus){
        // data:表示服务器端响应的数据内容
        // textStatus:success、error、notmodified和timeout四种请求状态之一	
    });
});

$.ajax()方法

$ajax()方法是jQuery中最为底层的Ajax方法，其语法结构如下:

$.ajax(url,[settings]);

• url:请求HTML页面的url地址。
• settings: keylvalue形式的请求设置，所有参数都是可选的。

$("button").click(function(){
    $.ajax({
        url:"server.js",type:"post",
        data:"this is ajax",
        success:function(data){
        	console.log(data);//服务器响应回数据之后的处理逻辑
        }
    });
});

$.getSccipt()方法

$.getScript()方法是jQuery中用于动态加载指定JavaScript文件，其语法结构如下:

$.getScript(url,[callback);

• url:请求JavaScript文件的url地址。
• callback:指定JavaScript文件成功加载后的回调函数。

$('button').click(function() {
	$.getScript('test.js');
});

$.getJSON()方法

$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容，其语法结构如下:

$.getJSON(url,[data],[callback]);

• url:请求JavaScript文件的url地址。
• data:发送给服务器端的key/value形式的数据内容。
• callback:指定JavaScript文件成功加载后的回调函数。

$('button').click(function() {
    $.getJSON( 'test.json', function(data){
    	console.log(data);
    });
});

异步提交表单

异步提交表单的步骤

所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下:

1. 获取表单及所有表单组件对应的数据值。
2. 将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
3. 通过Ajax异步交互方式提交表单。

var info = 'username='+$ ('#username').xal()+'&password='+$('tpassword').xal();
$.ajax({
	url:'server.js',
	type:'post',data:info,
    success:;function(data){
    	console.log(data);
    }
});

表单序列化

1. serialize()方法:将表单组件对应的数据值序列化为指定格式的字符串内容。

$('form').serialize()

2. serializeArray()方法:将表单组件对应的数据值序列化为JSON格式的数据内容。

s('select, :radio').serializeArray()