做前端开发的朋友一定对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
这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助,同时也希望你能多多支持我们!