ajax手记

来源：互联网发布：上海上嘉物流菜鸟网络编辑：程序博客网时间：2024/06/16 15:19

1 使用load()方法异步请求数据
使用load() 方法通过ajax请求加载服务器中的数据，
并把返回的数据放置在指定元素中，调用格式如下

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

<script type="text/javascript">$(function(){$(#id).bind("click",function(){var $this=$(this);$("ul").html("<img src='' alt=''/>").load("http://....."),function(){$this.attr("disabled","true");});})});</script>

2使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

$.getJSON("http://www.imooc.com/data/sport.json",function(data){                        $this.attr("disabled", "true");                        $.each(data, function (index, sport) {                            if(index==2)                            $("ul").append("<li>" + sport["name"] + "</li>");                        });

使用getScript()方法异步加载并执行js文件
使用get()方法以GET方式从服务器获取数据
使用post()方法以POST方式从服务器发送数据
使用serialize()方法序列化表单元素值
使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxStart()和ajaxStop()方法
使用ajax()方法加载服务器数据

 $.ajax({                    url: "http://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>");                    }                });

这里写图片描述

 <div id="divtest">            <div class="title">                <span class="fl">加载一段文字</span>                 <span class="fr">                    <input id="btnShow" type="button" value="加载" />                </span>            </div>            <ul>               <li id="divload"></li>            </ul>        </div>        <script type="text/javascript">            $(function () {                $("#divload").ajaxStart(function(){                    $(this).html("正在请求数据...")                });                $("#divload").ajaxStop(function(){                    $(this).html("数据请求完成！");                });                $("#btnShow").bind("click", function () {                    var $this = $(this);                    $.ajax({                        url: "http://www.imooc.com/data/info_f.php",                        dataType: "json",                        success: function (data) {                            $this.attr("disabled", "true");                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");                        }                    });                })            });        </script>

最后一个例子

 <ul></ul>        <script type="text/javascript">            var stus = [{                "name":"寂寞",                "age":"32",                "sex":"male"            },{                "name":"寂寞",                "age":"32",                "sex":"male"            }];            $.each(stus,function(index,stu){                $("ul").append("<li>"+stu.name+"</li>")                })        </script>

看有飞机

0 0