Jquery Ajax操作

最新推荐文章于 2024-03-13 07:00:00 发布

learning_ever

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量440

点赞数

分类专栏：前端，框架文章标签： jquery ajax post get

本文链接：https://blog.csdn.net/learning_ever/article/details/70980143

版权

前端，框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在编程的大道上，Jquery Ajax操作是必不可少的。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

一、 JQuery中的Ajax操作有:

底层方法

$selector.load(..) 了解即可

$.ajax(..);

简化方法

$.get(..);

$.post(..);

$.getScript(..);

$.getJSON(..);

我们就选择几个比较常用的来说说吧.....

1.$.selector.load(..):

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);

load(URL,data.callback)中的三个参数：

参数1：必选的，URL参数为你希望加载的URL。

参数2：可选的，data参数规定与请求一同发送的查询字符串键/值对集合。

参数3：可选的，callback参数是load（）方法完成后所执行的函数名称。

2.$.get():

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(url,callback)

其参数1：必选的，url参数为你希望加载的url。

参数2：可选的，请求完成后所执行的函数名。

3.$.post():

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);

其参数1：必需的，url参数规定你希望请求的url。

参数2：可选的，data参数规定连同请求发送的数据。

参数3：callback参数是请求成功后所执行的函数名。

$.get()与$.post()的区别：

$.get()发送请求后悔在地址栏中显示你所输入的用户名和密码，不能保证用户信息的安全性，当涉及到用户隐秘的

信息我们不会用$.get();而$.post()发送请求后在地址栏中不会显示用户名和密码，对于用户的信息保密性比较好，

一般会选用$.post()方法。

二、事件委托：

随着DOM结构的复杂化和Ajax等动态脚本技术的运用，有了较多的动态添加进来的元素，直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到，在这里就需要用到事件委托方法，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

$selector.bind("click", fn) 不支持未来元素
$selector.live(...) 支持未来元素~ 但是JQ在1.8版本以后废弃了！
$selector.delegate(...) 支持未来元素，是一个过渡方法，不建议使用了
$selector.on(...) 不支持/支持未来元素，常规方式，也是官网推荐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.2.4.js"></script>
    <script>
        $.ajax({
            url:"url",// 请求地址
            type:"get",
            data:{// 传递参数
                username:"admin",
                password:"123123"
            },
            dataType:"json",
            error:function() {/*请求失败时的操作*/
                // 系统超时等错误提示
            },
            success:function(data){/*请求成功时的回调函数*/
                // dom操作，处理数据
            }
        })

        $.get(
            "url",
            {username:"admin", password:"123"},
            function(data){

            }
        );
        $.post(
            "url",
            {username:"admin", password:"123"},
            function(data){

            }
        );
    </script>
</head>
<body>
    <ul id="classType">
        <li>原来页面上就有的元素</li>
    </ul>
    <script>
        $(function() {
            $.get("http://datainfo.duapp.com/shopdata/getclass.php",function(data){
                var _jsonArr = JSON.parse(data);
                $.each(_jsonArr, function(index, value) {
                    var $li = $("<li>").addClass("active");
                    $li.text(value.className);
                    $("#classType").append($li);
                });
            })

            /*$.post("url", function(data){
                // TODO data
            });*/
        });
       $("#classType").on("click", "li", function() { //用on()方法添加时间委托
           alert("事件委托的方式，支持未来元素");
       })
    </script>
</body>
</html>

learning_ever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery Ajax操作

在编程的大道上，Jquery Ajax操作是必不可少的。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。 JQuery中的Ajax操作有：底层方法 $selector.load(..
复制链接

扫一扫

专栏目录