做前端开发的朋友一定对ajax异步更新印象深刻。本文主要介绍了ajax异步请求的一些内容，具有一定的参考价值。让我们和边肖一起来看看吧。

做前端开发的朋友一定对ajax异步更新印象深刻。作为一个入坑新人，今天和大家聊聊ajax异步请求。既然是ajax，jQuery的知识是必不可少的。建议你去www.w3school.com学习。教程很完善，适合新手快速入门。

jQuery的引用可以通过下载js文件导入，也可以外部导入。

script src=' http://libs . Baidu . com/jquery/1 . 9 . 0/jquery . js ' type=' text/JavaScript '/script

导入jQuery后，我们就可以开始ajax异步更新请求数据了。

1.使用load()方法请求通过Ajax加载服务器中的数据，并将返回的数据放入指定的元素中。它的调用格式是：load(url，[data]，[callback])参数url是加载服务器的地址，可选的data参数是请求时发送的数据，callback参数是数据请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$('ul ')。html(' img src=' Images/loading . gif ' alt=' '/')。load('www.manyiaby.com '，function(){

});

});

});

2.使用getJSON()方法，可以通过Ajax异步请求获取服务器中的数据，解析获取的数据并显示在页面上。它的调用格式是jquery.getjson (URL，[data]，[callback])或者$。getjson (URL，[data]，[callback])其中，URL参数是请求加载json格式文件的服务器的地址，可选data参数是请求时发送的数据，callback参数是数据请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$.getJson('www.manyiaby.com '，function(data){

$.每个(数据，功能(索引，运动){

if(index==3)

alert(sport[' name '])；

})

});

});

});

3.使用getScript()方法在服务器中异步请求和执行JavaScript格式文件。它的调用格式如下：jQuery.getScript (url，[callback])或$。getScript(url，[callback])参数url是服务器请求地址，可选的callback参数是请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$.getScript('www.manyiaby.com '，function(){

警报(“操作完成”)；

});

});

});

4.使用get()方法时，GET从服务器请求数据，请求的数据由方法中回调函数的参数返回。其调用格式如下：$。get(url，[callback])参数url是服务器的请求地址，可选的callback参数是请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$.get('www.manyiaby.com '，函数(数据){

alert(data . name)；

}、' JSON ')；

});

});

5.与get()方法相比，post()方法多用于通过POST向服务器发送数据。服务器收到数据后，会对其进行处理，并将处理结果返回给页面。调用格式如下：$。post(url，[数据]，[回调])参数url是服务器的请求地址，可选数据是请求服务器时发送的数据，可选回调参数是请求成功后执行的回调。

$(function(){

$('#btn ')。单击(函数(){

$.post ('www.manyiaby.com '，{name:' Manyi.com '，URL:' www.manyiaby.com'}，function (data) {

警报(数据)；

});

});

});

6.使用serialize()方法，可以用表单中的name属性序列化元素值，并生成标准的URL编码的文本字符串，该字符串可以直接用于ajax请求。它的调用格式如下：$(选择器)。serialize()，其中选择器参数是一个或多个表单中的元素或表单元素本身。

$(function(){

$('#btn ')。单击(函数(){

alert($('form ')。serialize())；

});

});

7.使用ajax()方法是请求服务器数据的最低级也是最强大的方法。它不仅可以获取服务器返回的数据，还可以向服务器发送请求并传递数值。其调用格式如下：jQuery.ajax([settings])或$。ajax([settings])其中参数设置是发送ajax请求时的配置对象，在这个对象中，url代表服务器请求的路径，data是请求过程中传递的数据，dataType是服务器返回的数据类型，success是请求成功执行的回调函数，Type是发送数据请求的方式。默认值是get。

$(function(){

$('#btn ')。单击(函数(){

$.ajax({

网址：' www . many aby . com '，

数据类型：“文本”，

数据：{name:' Manyi.com '，url:'wwww.manyiaby.com'}，

成功：函数(数据){

警报(数据)；

}

});

});

});

8.可以使用ajaxSetup()方法设置Ajax请求的一些全局选项值。设置之后，下面的Ajax请求将不需要添加这些选项值。它的调用格式是jQuery.ajaxSetup([options])或$。Ajax setup([选项])。option参数是一个对象，通过它可以设置Ajax请求的全局选项值。

$(function () {

$.ajaxSetup({

数据类型：“文本”，

成功：函数(数据){

警报(数据)；

}

});

$('#btn ')。bind('click '，function () {

$.ajax({

数据：{name:' Manyi.com '，url: 'www.manyiaby.com'}，

网址：“www . many aby . com”

});

})

});

});

9.ajaxStart()和ajaxStop()方法绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式是：$(选择器)。ajaxStart(function())和$(选择器)。ajaxStop(function())，其中两个方法中的括号都是绑定函数。AjaxStart()方法绑定的函数在发送AJAX请求前执行，ajaxStop()方法绑定的函数在请求成功后执行。

$(function () {

$.ajaxStart(function (){

警报('请求数据.');

});

$.ajaxStop(function (){

警报(“数据请求已完成！”);

});

$('#btn ')。bind('click '，function () {

$.ajax({

网址：' www . many aby . com '，

数据类型：' json '，

成功：函数(数据){

Alert ('name:' data.name ')。

}

});

})

});

10.定义一个json对象，用来保存学生的相关资料。通过美元。each()工具函数，获取数组中每个元素的名称和内容并显示在页面上。

！文档类型html

超文本标记语言

头

meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /

script src=' http://libs . Baidu . com/jquery/1 . 9 . 0/jquery . js ' type=' text/JavaScript '/script

练习/标题

/头

身体

按钮/按钮

脚本类型='文本/javascript '

$(function () {

$('button ')。bind('click '，function () {

Var jsonDate=[{name:' Manyi.com '，URL:' www . manyi aby . com ' }]；

$.each(jsonDate，function(index，data){

alert(data . name)；

});

})

});

/脚本

/body

/html

这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助，同时也希望你能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。