JQuery AJAX详解-优快云博客

本文详细介绍了JQuery中AJAX的相关方法，包括load、get、post及标准ajax方法的使用示例，展示了如何通过这些方法实现网页元素的动态加载与数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jquery之ajax

一、load

1、概述

2，用法

1
2
3
4
5
6
7
8
9
10
11

<body>
    <span id="cl">我需要阳光</span>
    <div id="dis"></div>
</body>
<script>
    $(function () {
        $("#cl").click(function(){
            $("#dis").load('http://maizi.itpaimai.com/jquery/load/');
        });
    });
</script>

二、get

1、概述

2、用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<body>
<label for=""> get 的方式获取手机信息</label>
<div>手机： <input type="text" name="phone" id="iphone_g" placeholder="请输入手机号"/></div>

<div>
    <span id="get_msg">获取的信息显示在这里</span>
    <br/>
    <span id="get_msg_do">点击获取</span>
</div>
</body>
<script>
    $(function () {
        $("#get_msg_do").click(function () {
            var iphone = $("#iphone_g").val();
            var url = 'http://maizi.itpaimai.com/jquery/get/';
            var data = {phone:iphone};
            $.get(url,data,function(msg){
                if(msg.errNum=='-1'){
                    $("#get_msg").text(msg.retMsg);
                }else{
                    $("#get_msg").text(msg.retData.supplier+':'+msg.retData.province+msg.retData.city+':'+msg.retData.suit);
                }
            },'jsonp');
        });
    });
</script>

三、post

1，概述

2、用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<body>
<label for=""> post 的方式获取手机信息</label>
<div>手机： <input type="text" name="phone" id="iphone_g" placeholder="请输入手机号"/></div>

<div>
    <span id="get_msg">获取的信息显示在这里</span>
    <br/>
    <span id="get_msg_do">点击获取</span>
</div>
</body>
<script>
    $(function () {
        $("#get_msg_do").click(function () {
            var iphone = $("#iphone_g").val();
            var url = 'http://maizi.itpaimai.com/jquery/post/';
            var data = {phone:iphone};
            $.post(url,data,function(msg){
                if(msg.errNum=='-1'){
                    $("#get_msg").text(msg.retMsg);
                }else{
                    $("#get_msg").text(msg.retData.supplier+':'+msg.retData.province+msg.retData.city+':'+msg.retData.suit);
                }
            },'json');
        });
    });
</script>

四、ajax

1、概述：

2、用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<body>
<label for="">ajax 跨域方式验证用户名</label>
<div>用户名： <input type="text" id="username" placeholder="请输入你的用户名"/></div>
<div>
    <span id="msg">获取的信息显示在这里</span>
    <br/>
    <span id="get_msg_do">点击获取</span>
</div>
</body>
<script>
    $(function () {
        $("#get_msg_do").click(function(){
            var name = $("#username").val();
            var url = 'http://maizi.itpaimai.com/jquery/ajax/';
            var data = {username:name};
            $.ajax({
                type:"GET",
                url:url,
                data:data,
                dataType:'jsonp',
                success:function(msgs){
                    $("#msg").text(msgs);
                },
                error:function(){
                    $("#msg").text('link fail');
                },
            });
        });
    });
</script>