JQuery实现Ajax

来源：互联网发布：淘宝好评返现短信范文编辑：程序博客网时间：2024/06/18 04:18

1、通过load方法加载页面内容

参考：点击打开链接

load方法可以直接将远程html页面内容加载到dom结点中

参数：

url,[data,[callback]]String,Map/String,Callback

url:待装入 HTML 网页网址。

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

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

示例：

<head>    <title>Title</title>    <%--引入jQuery--%>    <script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>    <script type="text/javascript">        $(function () {            //重新定义a标签的click响应            $("a").click(function () {                var url = this.href;                //使用load方法加载id为content中的div内容                $("#content").load(url);                return false;            });        });    </script></head>

load(url, [args], [callback] )

args表示获取资源的方式，默认为“”GET“

url + " tagName childTagName"指定返回内容的特定部分

2、通过get方法加载指定内容

参数：

url,[data],[callback],[type]

url:待载入页面的URL地址

data:待发送 Key/value 参数。

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

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

示例：

<script type="text/javascript">        $(function () {            $("a").click(function () {                var url = this.href;                var args = {"time":new Date()};                $.get(url, args, function (data) {                    var name = $(data).find("name").text();                    var sex = $(data).find("sex").text();                    var age = $(data).find("age").text();<span style="white-space:pre"></span>                    $("#content").empty().append("<h2>"+name+"</h2>").append("<br/><h3>"+sex+ "</h3>").append("<br/><h3>"+age+"</h3>");                })                return false;            })        })    </script>

post方法与get方法类似

3、getJSON

参数：

url,[data],[callback]String,Map,Function

url:发送请求地址。

data:待发送 Key/value 参数。

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

示例

<script type="text/javascript">        $(function () {            $("a").click(function () {                var url = this.href;                var args = {"time":new Date()};                $.getJSON(url, args, function (data) {                    var name = data.person.name;                    var sex = data.person.sex;                    var age = data.person.age;                    $("#content").empty().append("<h2>"+name+"</h2>").append("<br/><h3>"+sex+ "</h3>").append("<br/><h3>"+age+"</h3>");                })                return false;            })        })    </script>

)

0 0