您现在的位置是：孟垂博自媒体博客 ✈ JQuery

使用load(),getJSON(),get(),post(),ajax(),ajaxSetup()方法异步请求数据

08-11最后更新时间：2024-04-26【已收录】人已围观收藏

简介转载于慕课网代码
备注为自己认为应该 注意 的地方

1.load() 
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用load()方法异步请求数据</title>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <style>
        #divtest
{
    width: 282px;
}
#divtest .title
{
    padding: 8px;
    background-color:Blue;
    color:#fff;
    height: 23px;
    line-height: 23px;
    font-size: 15px;
    font-weight: bold;
}
ul
{
    float: left;
    width: 280px;
    padding: 5px 0px;
    margin: 0px;
    font-size: 14px;
    list-style-type: none;
}
img
{
    margin: 8px;
}
ul li
{
    float: left;
    width: 280px;
    height: 23px;
    line-height: 23px;
    padding: 3px 8px;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}
        </style>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我最爱吃的水果</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>   <!--这里显示获取的数据-->
        </div>
        
        <script type="text/javascript">

            $(function () {

                $("#btnShow").bind("click", function () {

                    var $this = $(this);

                    $("ul").html("") <!--可以设置一个加载的动态图-->

                    .load("https://www.imooc.com/data/fruit.html",function(){

                        $this.attr("disabled", "true");  <!--加载完以后的函数，让input点击失效-->
                        
                    });

                })

            });

        </script>
    </body>
</html>
2.getJSON() 

    <head>
        <title>使用getJSON()方法异步加载JSON格式数据</title>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我最喜欢的一项运动</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function(){
               $('#btnShow').bind("click",function(){
                        var $this = $(this);
                       $.getJSON('https://www.imooc.com/data/sport.json',function(data){
                            $this.attr("disabled", "true");
                           $.each(data,function(index,value){    //each()遍历
                           
                          $("ul").append("<li>" +index+ value["name"] + "</li>");
                           });
                       }); 
                   } )
                  });
        </script>
    </body>
</html>
3.get() 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用get()方法以GET方式从服务器获取数据</title>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我的个人资料</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        //在回调函数中通过data参数传回请求的数据，并以data.name格式访问数据中各项的内容,data是回调函数默认的参数，data取名字随意，这里是形参
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.get('https://www.imooc.com/data/info_f.php',function(data) {
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    }, "json");
                })
            });
        </script>
    </body>
</html>
4.post() 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用post()方法以POST方式从服务器发送和获取数据</title>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测数字是否大于0</span> 
                <span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
            </div>
            <ul>
               <li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                   $zhi=$("#txtNumber").val();
                $.post('https://www.imooc.com/data/check_f.php',{num:$zhi},
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });
        </script>
    </body>
</html>
5.ajax() 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用ajax()方法加载服务器数据</title>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测数字的奇偶性</span> 
                <span class="fr">
                    <input id="btnCheck" type="button" value="检测" />
                </span>
            </div>
            <ul>
               <li>请求输入一个数字 
                   <input id="txtNumber" type="text" size="12" />
               </li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.ajax({
                       url:'https://www.imooc.com/data/check.php',
                        data: { num: $("#txtNumber").val() },
                        type:"post",
                        success: function (data) {
                            $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                        }
                    });
                })
            });
        </script>
    </body>
</html>
6.ajaxSetup() 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用ajaxSetup()方法设置全局ajax请求默认选项</title>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">奇偶性和是否大于0</span> 
                <span class="fr">
                    <input id="btnShow_1" type="button" value="验证1" />
                    <input id="btnShow_2" type="button" value="验证2" />
                </span>
            </div>
            <ul>
               <li>请求输入一个数字 
                   <input id="txtNumber" type="text" size="12" />
               </li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
              $.ajaxSetup({
                type:"post",
                success:function(data){
                        $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
                });
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "https://www.imooc.com/data/check.php"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "https://www.imooc.com/data/check_f.php"
                    });
                })
            });
        </script>
    </body>
</html>
来个json例子： 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="text" placeholder="请输入您的名字" id="txt">
        <button id="saveBtn">保存数据</button>
        <button id="loadBtn">加载数据</button>
        <button id="deleteBtn">清空数据</button>
        <ul></ul>
    </body>
    <script>
        $(function () {
            var $save = $('#saveBtn'),
                $load = $('#loadBtn'),
                $delete = $('#deleteBtn'),
                json = [];
            $save.click(function() {
            	var text = $('#txt').val(); 
                if (text) {
                    json.push({"name": text});
                    $('#txt').val("");
                } else {
                    alert('写点东西再保存不行吗老铁？！');
                }
            });
            $load.click(function () {
                if (json.length) {
                $('ul').html('');
                $.each(json, function(index, obj) {
                    $('ul').append(`<li>学生的名字是：${obj.name}</li>`);
                });
                } else {
                    alert("没数据啦！");
                }
            });
            $delete.click(function () {
                json = [];
                alert('你惨了，数据都没了。');
                $("ul").html("");
            });
        });
    </script>
</html>

方法
《使用load(),getJSON(),get(),post(),ajax(),ajaxSetup()方法异步请求数据.doc》
如果这篇文章对你有所帮助，劳烦点个赞
推荐度：

很赞哦！ ()

上一篇：JQuery中数组经常会用到$.each()方法整理

下一篇：form表格提交满足条件再执行action小技巧

相关文章

文章评论

点击排行

本栏推荐

标签云(最新)

站点信息

  • 建站时间：2019年06月15日
  • 网站程序：帝国CMS7.5
  • 博客模板：可免费共享
  • 文章统计：235篇文章
  • 时间卷轴：时间轴
  • 标签管理：标签云
  • 网站地图：XML网站地图
  • 微信二维码：扫描一下，你我就是有缘