使用jQuery实现Ajax

来源：互联网发布：手机淘宝订单号查询编辑：程序博客网时间：2024/05/18 09:04

使用Ajax，不用刷新页面，但可以和服务器端进行通信。使用ajax的主要方式是：XMLHttpRequest对象

1 jQuery中的Ajax

jQuery对Ajax操作进行了封装，常用的方法是load(),$.get() 和 $.post()。

2：load(url,[data],[callback])方法介绍

载入远程 HTML 文件代码并插入至 DOM 中，参数：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

例1：点击超链接时将超链接内的内容加载到div中.

<html><head><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){  $("a").click(function(){   var url=this.href;    $("#content").load(url);   return false;  });});</script></head><body><a href="helloAjax.txt">helloAjax</a><div id="content"></div></body></html>

借助缓存的效果能够将超链接中的笑脸也加载到html页面中来。

<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){  $("a").click(function(){   var url=this.href;   var args={"time":new Date()}; //参数类型为json数据   $("#content").load( url ,args );   return false;  });});</script>

注意：url中可以使用selector选择器来加载使用的内容，注意空格即可。

var url=this.href+" a"; //" a"注意a前面有一个空格啊

任何一个html代码都可以使用load方法来加载ajax，结果直接插入到html代码中。

3: jQuery.get(url,[data],[callback],[type])

通过远程 HTTP GET 请求载入信息。

jQuery.post(url, [data], [callback], [type])与$.get()方法类似

参数：url,[data],[callback],[type]

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

例2：点击超链接，将超链接中的xml代码解析出来添加到id=details的节点中

<html><head><script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script><!-- "../scripts/jquery-1.7.2.js"表示script在上一级别的目录中 --><script type="text/javascript">    $(function(){      $("a").click(function(){        var url = this.href;        var agrs={"time":new Date()};  //json格式        $.get(url,agrs,function(data){  //回调函数，当相应结束时候，回调函数被触发，相应结果在data中           var name=$(data).find("name").text();   //解析xml中的代码           var website=$(data).find("website").text(); //解析xml中的代码           var email=$(data).find("email").text(); //解析xml中的代码           $("#details").empty().append("<h1>"+name+"</h1>")                                .append("<h2>"+website+"</h2>")                                .append("<h3>"+email+"</h3>");        });        return false;      });    });</script></head><body><h1>People</h1><ul><li><a href="files/andy.xml">Andy</a></li><li><a href="files/richard.xml">Richard</a></li><li><a href="files/jeremy.xml">Jeremy</a></li></ul><div id="details"></div></body></html>

4: jQuery.getJSON(url, [data],[callback])

$.getJSON()：通过 HTTP GET 请求载入 JSON 数据。

url,[data],[callback]：

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

例3：点击超链接，将超链接中的jsonl代码解析出来添加到id=details的节点中

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head></style><script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script><script type="text/javascript">  $(function(){      $("a").click(function(){        var url = this.href;        var agrs={"time":new Date()};  //json格式        $.getJSON(url,agrs,function(data){  //回调函数，当相应结束时候，回调函数被触发，相应结果在data中           var name=data.person.name;   //解析xml中的代码           var website=data.person.website; //解析xml中的代码           var email=data.person.email; //解析xml中的代码           $("#details").empty().append("<h1>"+name+"</h1>")                                .append("<h2>"+website+"</h2>")                                .append("<h3>"+email+"</h3>");        });        return false;      });    });  </script></head><body><h1>People</h1><ul><li><a href="files/andy.js">Andy</a></li><li><a href="files/richard.js">Richard</a></li><li><a href="files/jeremy.js">Jeremy</a></li></ul><div id="details"></div></body></html>

0 0