TypechoJoeTheme

至尊技术网

统计
登录
用户名
密码
/
注册
用户名
邮箱

悠悠楠杉

网站页面

JQuery ajax 实例详解

2019-12-31
/
0 评论
/
836 阅读
/
正在检测是否收录...
12/31
$.ajax({
    type: "post",//提交数据的类型 post get
    url: "login.html",//提交的网址
    data: {//提交的数据
        name: "name",
        password: "password"
    },
    dataType: "json",//"xml", "html", "script", "json", "jsonp", "text" //返回数据的格式
    contentType: "application/x-www-form-urlencoded",//发送数据到服务器时所使用的内容类型
    timeout: 10000,//设置请求超时时间(毫秒)
    async: true,//异步为true,同步为false,默认为true
    beforeSend: function(){//在请求之前调用的函数
        $("#msg").html("logining");
    },
    success: function(res){//成功返回之后调用的函数   
        $("#msg").html(decodeURI(res));            
    },
    error: function(){//调用出错执行的函数
        //请求出错处理
    },
    complete: function(XMLHttpRequest, textStatus){//调用执行后调用的函数
        alert(XMLHttpRequest.responseText);
        alert(textStatus);
    }
});

什么是Ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

由上面的定义可以看出,Ajax的主要目的是为了,在不需要重新加载整个网页的前提下,使网页的一部分更新。同时,为了实现部分更新,就需要前端和后台之间的数据交换,包括前端向后台提交数据和前端从后台读取数据。

Ajax基本结构

因为学习的是jQuery中Ajax方法,所以所说的结构即是$.ajax()的结构。
$.ajax()方法中的参数很多,我在实例中使用的只是一小部分,这里只介绍实例中所需要的参数的使用,其余更多参数还将继续学习。

$.ajax({          
        url:"发送请求(提交或读取数据)的地址", 
     dataType:"预期服务器返回数据的类型",  
     type:"请求方式", 
     async:"true/false",
     data:{发送到/读取后台(服务器)的数据},
     success:function(data){请求成功时执行},      
     error:function(){请求失败时执行}
});

注:(这些参数均为选填,如果不设置,按默认值处理)

<1> url 默认为当前页地址

<2> dataType 可用类型:
(如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递)
1、xml:返回XML文档,可用JQuery处理。
2、html:返回纯文本HTML信息。
3、script:返回纯文本JavaScript代码。
4、json:返回json数据。/
5、jsonp:(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
6、text:返回纯文本字符串。
说明:对于json和jsonp的区别,本小白暂时没有深入了解,目前只知道json可以跨域读取数据,有待进一步学习~

<3> type 可用类型主要为post和get两种(默认为get)
1、get:从指定的资源请求数据(从服务器读取数据)
2、post:向指定的资源提交要被处理的数据(向服务器提交数据)

<4> async 异步方式,默认为true,即异步方式。当设置为false时,为同步方式。
异步方式:ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发ajax里的success方法,这时候执行的是两个线程。
同步方式:在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
说明:这里的同步和异步有待深入理解,以下实例均使用默认的异步方式

<5> data 请求的数据,{ }中可以填入多项数据。如果不填(一般为get请求),则读取对应地址的全部数据,此时可以在console中通过console.log(data)显示数据情况。

<6> success 和 error 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。

经验jsajaxjQuery详解
朗读
赞(0)
版权属于:

至尊技术网

本文链接:

https://www.zzwws.cn/archives/2508/(转载时请注明本文出处及文章链接)

评论 (0)