很多朋友都喜欢用 JQ 而 ajax 更是 JQ 里必不可少的 下面为大家详细介绍一下 JQ 的 ajax
首先 什么是 ajax:
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、html、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
第一种
$("#id").load()
这算是比较常见的一种 JQ 的 ajax 的写法 通过 ID 找到 dom 节点 然后等页面加载完毕之后通过 aja 请求数据
load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中
- load(url, data,
- function(response, status, xhr))
一共有三个参数
url:规定要将请求发送到哪个 URL
data:可选。规定连同请求发送到服务器的数据,通常情况下如果只是简单的请求数据这个参数可以忽略
- $("button").click(function(){
- $("div").load('demo_ajax_load.txt');
- });
第二种
$.get();
相信对 ajax 稍微有点了解的朋友都知道 get 和 post 那么同样的 JQ 里面也少不了他们两个
使用 get 方法需要先知道你所要请求的数据是 json 类型还是 JSONP 类型
如果是 json:
- $.get("http://datainfo.duapp.com/shopdata/getclass.php",
- function(data) {
- console.log(data)
- })
JSONP:
- $.get("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",
- function(data) {
- console.log(data)
- },
- "JSONP");
- $.get("http://datainfo.duapp.com/shopdata/getCar.php", {
- userID: "f66"
- },
- function(data) {
- console.log(data)
- },
- "JSONP")
对于 JSONP 这两种写法的区别就在于传递参数的方式,第一种是直接在后面加?然后写数据,第二种是逗号隔开之后在大括号里写
第三种
- $.post(,,);
必需的 参数规定希望请求的 URL。
可选的 参数规定连同请求发送的数据。
可选的 参数是请求成功后所执行的函数名
和 get 方法差不多 post 也有不同的写法
- $.post("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",
- function(data) {
- console.log(data)
- },
- "JSONP");
- $.post("http://datainfo.duapp.com/shopdata/getCar.php", {
- userID: "f66"
- },
- function(data) {
- console.log(data)
- },
- "JSONP")
具体区别和上面 get 方法一样
下面给大家说说 get 和 post 的区别
Get:
用 get 方式可传送简单数据,但大小一般限制在 1KB 下,数据追加到 url 中发送(http 的 header 传送),也就是说,浏览器将各个表单字段元素及其数据按照 URL 参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get 方法会带来严重的安全性问题。
Post:
当使用 POST 方式时,浏览器把各表单字段元素及其数据作为 HTTP 消息的实体内容发送给 web 服务器,而不是作为 URL 地址的参数进行传递,使用 POST 方式传递的数据量要比使用 GET 方式传送的数据量大的多。
总之,GET 方式传送数据量小,处理效率高,安全性低,会被缓存,而 POST 反之。
第四种
$.ajax();
这种方法估计是大家最常用到的,因为在大多数编译软件中例如 Hbuilder,直接会出现类似的提示
- $.ajax({
- type:"get",
- url:"",
- async:true
- });
而根据这个大家也很容易猜到这些参数的意义,需要注意的是 async 这个是用来判断同步异步的,通常情况下大家可以不用理会,直接删掉就好,这时候可能有朋友会问了,成功之后的函数写到哪里,别着急,看下面
- $.ajax({
- type:"get",
- url:"",
- function(data){
- console.log(data)
- }
- });
只要这样就可以在这个 function 函数内对请求回来的数据进行操作了。
第五种
$.getJSON();
这种方法可能大家不是很常见,但是不得不说这种方法是最简洁也可以说是最方便的一种方法
- $.getJSON("http://datainfo.duapp.com/shopdata/getCar.php?userID=f66&callback=?",
- function(data) {
- console.log(data)
- })
- $.getJSON("pro.json",
- function(data) {
- console.log(data) sortPrice(data);
- data.sort(function(a, b) {
- return a.price - b.price;
- }) console.log(data)
- })
如果大家是从上面一直看到这里的相信很容易理解这两种写法是做什么的 没错 第一种是为了请求 JSONP 第二种是常规 json 数据
可能有朋友就不理解了,到底什么是 JSONP 什么是 JSON,这个问题如果讨论起来那就又是另一个话题了 在这里大家只需要知道你所要请求的数据
是什么类型的就好,通常在接口里都会给你说明的,而在 ajax 里怎么用也比较好区分,就是 JSONP 会加? callback = 而 json 不需要,所以当你看见?的时候
那么没错了 他就是 JSONP
第六种
$.getScript();
这种方法就厉害了,可能前五种方法大家只能请求数据,那么我问大家,当大家想引用一个 js 文件的时候会怎么做呢?
是不是直接引用 script 标签引入,这里这种方法可以避免使用标签
- $("#btn").click(function() {
- $.getScript("test.js",
- function() {
- setTimeout(function() {
- alert(2)
- },
- 2000)
- })
- });
这样就可以直接引用 test.js 了。
然后再给大家说一说使用 ajax 中常见的一些问题及解决方法
使用 Post 方式需注意:
1. 设置 header 的 Context-Type 为 application/x-www-form-urlencode 确保服务器知道实体中有参数变量. 通常使用 XmlHttpRequest 对象的 SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。例:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2. 参数是名 / 值一一对应的键值对, 每对值用 & 号隔开. 如 var name=abc&sex=man&age=18,注意 var name=update.php
abc&sex=man&age=18 以及 var name=?abc&sex=man&age=18 的写法都是错误的;
3. 参数在 Send(参数) 方法中发送, 例: xmlHttp.send(name); 如果是 get 方式,直接 xmlHttp.send(null);
4. 服务器端请求参数区分 Get 与 Post。如果是 get 方式则 $username = $_GET["username"]; 如果是 post 方式,则 $username = $_POST["username"];
AJAX 乱码问题
产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是 utf-8,如果客户端页面是 gb2312 或者其它编码数据就会产生乱码
2、post 方法提交数据默认的字符编码是 utf-8,如果服务器端是 gb2312 或其他编码数据就会产生乱码
解决办法有:
1、若客户端是 gb2312 编码,则在服务器指定输出流编码
2、服务器端和客户端都使用 utf-8 编码
gb2312:header('Content-Type:text/html;charset=GB2312');
utf8:header('Content-Type:text/html;charset=utf-8');
来源: http://www.cnblogs.com/wxtlinlin/p/6527966.html