jQuery学习笔记（ajax）-原创手记-慕课网

1、$.getJSON(url,[data],[callback])

   $.getJSON("url",function (data){
         $this.attr("disabled", "true");                   
          $.each(data, function (index, arr) {
                  $("ul").append("<li>" + arr["name"] + "</li>");
          });
 });

可以用each遍历一下；

2、$get("url",function(data){},"json")

设置从服务器获取数据的类型，所以得到的数据格式为json类型的。
默认get从服务器获取到的数据是字符串类型

第一不要忘了后面的json

第二不要忘了加引号

3、使用serialize()方法序列化表单元素值

$("form").serialize()
//将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串
Text=name&Select=0&Checkbox=on

4、使用ajaxSetup()方法设置全局Ajax默认选项

            $(function () {
                $.ajaxSetup({
                    type:"post",
                    dataType:"text",
                    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: "http://www.imooc.com/data/check.php" 
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.imooc.com/data/check_f.php"
                    });
                })
            });

几个ajax同时调用，取出来一起公共部分

5、使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

比如用在加载数据之初有什么动画，结束消失

6、拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

        <script type="text/javascript">
            $(function () {
                $("#x").draggable({containment:"parent",axis:"x"});
                $("#y").draggable({containment:"parent",axis:"y"});
            });
        </script>