|
很多朋友都喜欢用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：可选。规定连同请求发送到服务器的数据，通常情况下如果只是简单的请求数据这个参数可以忽略 function(response,status,xhr)：可选。规定当请求完成时运行的函数。请求完成后将要实现的函数。 虽然是可选 但是通常情况下都会写的，因为请求数据回来之后总是要操作数据做点什么对吧。 eg： $("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
第二种 $.get(); 相信对ajax稍微有点了解的朋友都知道get和post 那么同样的 JQ里面也少不了他们两个 使用get方法需要先知道你所要请求的数据是json类型还是JSONP类型 如果是json： $.get("http://datainfo./shopdata/getclass.php",function(data){
console.log(data) })
JSONP：  $.get("http://datainfo./shopdata/getuser.php?userID=f66",function(data){
console.log(data)
},"JSONP");
$.get("http://datainfo./shopdata/getCar.php",{userID:"f66"},function(data){
console.log(data)
},"JSONP")
对于JSONP这两种写法的区别就在于传递参数的方式，第一种是直接在后面加？然后写数据，第二种是逗号隔开之后在大括号里写 第三种 $.post(URL,data,callback); 必需的 URL 参数规定希望请求的 URL。 可选的 data 参数规定连同请求发送的数据。 可选的 callback 参数是请求成功后所执行的函数名 和get方法差不多 post也有不同的写法 $.post("http://datainfo./shopdata/getuser.php?userID=f66",function(data){
console.log(data) },"JSONP"); $.post("http://datainfo./shopdata/getCar.php",{userID:"f66"},function(data){ console.log(data) },"JSONP")
具体区别和上面get方法一样 下面给大家说说get和post的区别 Get: Post: 总之，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./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方式需注意： xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的; 4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"]; AJAX乱码问题 产生乱码的原因: 解决办法有： gb2312:header('Content-Type:text/html;charset=GB2312'); utf8:header('Content-Type:text/html;charset=utf-8');
|
|
|
