jQuery的ajax技术

编辑本博客

ajax=异步的JavaScript和html

load()

从服务器加载数据，并把返回的数据放入备选元素中。这里加载回来的数据可以只有一个p标签，无需head元素等

$("selector").load(url,data,callback)

url：必选，规定加载的url地址
data：可选，一同发送的查询字符串键值对的集合
callback：可选，load方法执行完毕后执行的函数

<script type="text/javascript">$(document).ready(function () {$("#projects").load('./ajax_data.html');})
</script>

View Code

请求的同时进行传参

<script type="text/javascript">$(document).ready(function () {$("#projects").load('./ajax_data.html',{"name":"zhangsan","age":22});})
</script>

View Code

getJSON()

异步加载JSON数据，获取服务器上的数据，并显示在网页中

$.getJSON(url,[data],[callback])

url：服务器请求地址
data：可选参数，请求时发送的数据

callback：请求完成后的回调函数

<script type="text/javascript">$.getJSON("./data/getJSON.json",function (data) {var str=""$.each(data,function (index, ele) {$("ul").append("<li>"+ele.name+"</li>")});})
</script>

View Code

get()方法

通过http的get方法从服务器

$.get(ulr,[callback])

post()方法

以post方式向服务器发送数据

$.post(url,[data],[callback])

ajax示例

get方法

<script type="text/javascript">$.ajax({url:'./data/data.json',type:'get',dataType:'json',success:function (data) {console.log(data);},error:function () {}})
</script>

View Code

post方法

<script type="text/javascript">$.ajax({url:'./data/data.json',type:'get',dataType:'json',success:function (data) {console.log(data);},error:function () {}});$.ajax({url:"/course",type:'post',data:{a:1,b:2},success:function(data) {//data为后台返回的数据if(data.state=="ok" && data.status=='200'){alert("登录成功")}},error:function(err) {//请求失败调用的函数
        console.log(err)}});
</script>