jQuery中的Ajax

最新推荐文章于 2020-11-17 01:09:25 发布

刘小筛

最新推荐文章于 2020-11-17 01:09:25 发布

阅读量388

点赞数

分类专栏： JQuery Ajax 前端文章标签： jquery ajax

本文链接：https://blog.csdn.net/lhjbk/article/details/53140285

版权

JQuery 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

Ajax

7 篇文章 0 订阅

订阅专栏

jQuerh对Ajax操作进行了封装，在jQuery中最底层的方法是 $.ajax().第二层是load(),$ .get()和 $.post().第三层是$ .getScript()和$.getjSon().

load()方法

load方法是jQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中，它的结构是：load(url[,data][,callback])

参数名称	类型	说明
url	String	请求HTML页面的URL地址
data（可选）	Object	发送到服务器的key/value数据
callback（可选）	Function	请求完成时的回调函数，无论请求成功或失败

程序员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件等url作为参数传递给load()方法即可。

html格式伪代码如下：

<h2><a href="mailto:15204510180@163.com">JBK</a></h2>
<a href="http://baidu.com/">http://baidu.com/</a>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    //记着联入一个jQuery文件插件
    <script type="text/javascript">
        $(function () {
            $("a").click(function(){
                var url=this.href+"h2 a";
                var args={"time": new Date()};
                //任何一个html节点都可以使用load方法来加载Ajax，结果将直接插入html节点中
                $("#details").load(url,args);
                return false;
            });

        })
    </script>
</head>
<body>
<a href="text1.html"></a>
<div id="details"></div>
</body>
</html>

load()方法的细节

如果只需要加载目标HTML页面内的某些元素，则可以通过load()方法的URL参数来达到目的。通过URL参数指定选择符，就可以方便的从加载过来的HTML文档中选出所需要的内容。load()方法等URL参数的语法结构为“urlselector”（注意：url和选择器之间有一个空格）
传递方式：load()方法等传递参数根据参数data来自动拟定。如果没有参数传递，采用GET方式传递，否则采用POST方式
对于必须在加载完成才能继续等操作，load()方法提供了回调函数，该函数有三个参数：代表请求返回内容等data;代表请求状态等textStatus对象和XMLHttpRequest对象
xml格式伪代码展示：

$.get()（或$ .post()）方法

$.get()方法实用GET方式来进行异步请求。是他的结构是：$ .get(url[,data][,callback][,type]);

Are参数名称	类型	说明
url	String	请求HTML页面的URL地址
data（可选	）	发送到服务器端key/value数据会作为QueryString附加到请求URL中
callback（可选）	Function	载入成功时回调函数（只有当Response端返回状态是success时才调用该方法）自动将请求结果和状态传递给该方法
type（可选）	String	服务器返回内容的格式。包括xml html script json text 和_default

- $.get()方法的回调函数只有两个参数：data代表返回的内容，可以是XML文档，JSON文档，HTML片段等，textstatus代表请求状态，其值可能为：success, error, notmodify, timeout4种。 -$ .get()和$post()方法是jQuery中的全局函数，而find()等方法都是对jQuery对象进行操作的方法。

<?xml version="1.0" encoding="utf-8" ?>
<details>
    <name>JBK</name>
    <website>http://baidu.com/</website>
    <email>15204510180@163.com</email>
</details>


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    ／／记着联入一个jQuery文件插件
    <script>
        $(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 website=$(data).find("website").text();
                    var email=$(data).find("email").text();
                    $("#details".empty().append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>").append("<a href='"+website+"'>"+website+"</a>"));

                });
                return false;

            })
        })


    </script>
</head>
<body>
<a href="test.xml">1</a>
<a href="test.xml">2</a>
<a href="test.xml">3</a>
<a href="test.xml">4</a>
<div id="details"></div>

</body>
</html>

如果是POST请求，只需把get函数改成post即可。

Json格式伪代码如下：

{
    "person": {
    "name": "JBK",
        "website": "http://baidu.com/",
        "email": "15204510180@163.com"
}
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    ／／记着联入一个jQuery文件插件
    <script>
        $(function(){
            $("a").click(function () {
                var url=this.href;
                var args= {"time":new Date()};
                $.getJson(url,args,function(data){
                    var name=data.person.name;
                    var website=data.person.website;
                    var email=data.person.email;
                    $("#details".empty().append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>").append("<a href='"+website+"'>"+website+"</a>"));

                });
                return false;

            })
        })


    </script>
</head>
<body>
<a href="json.js">1</a>
<a href="json.js">2</a>
<a href="json.js">3</a>
<a href="json.js">4</a>
<div id="details"></div>

</body>
</html>

刘小筛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的Ajax

jQuerh对Ajax操作进行了封装，在jQuery中最底层的方法是.ajax().第二层是load(),.ajax().第二层是load(),.get()和.post().第三层是.post().第三层是.getScript()和$.getjSon().load()方法load方法是jQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中，它的结构是：load(url[
复制链接

扫一扫