jQuery 实现Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/u013899738/article/details/51285813

本文详细介绍了Ajax中的关键技术和方法，包括load(), getJSON(), getScript(), serialize(), ajax(), ajaxSetup(), ajaxStart()及ajaxStop()等的使用方法和应用场景。

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

1.使用load()方法异步请求数据
load(url,[data],[callback])
-url：服务器地址
-data：请求数据
-callback：请求成功后执行的函数

2.getJSON()方法异步加载JSON格式数据
$.getJSON(url,[data],[callback])
-url：服务器地址
-data：请求数据
-callback：请求成功后执行的函数

3.使用getScript()方法异步执行加载并执行js文件
$.getScript(url,[callback])
-url：服务器地址
-callback：请求成功后执行的函数

4.使用get()方法以GET方式从服务器获取数据
$.get(url,[callback])

5.使用post()方法以POST方式从服务器发送数据

$.post(url,[data],[callback])
            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.post("http://www.imooc.com/data/check_f.php",
                    {num:$("#textNumber").val()},
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });

6.使用serialize()方法序列化
使用serialize()可将表单中有name属性的元素进行序列化，
生成标准的URL编码，直接可用于Ajax请求
$(seleector).serialize()

            $(function () {
                $("#btnAction").bind("click", function () {
                    $("#litest").html(
                        $("form").serialize());
                })
            })

7.使用ajax()方法加载服务器数据

$.ajax([settings])
-settings：发送请求时的配置对象
url：服务器地址
data：请求数据
dataType：服务器返回的数据类型
success：请求成功后执行的函数
type：请求方式（默认为get）

            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.ajax({
                        url:"http://www.imooc.com/data/check.php",
                        data: { num: $("#txtNumber").val() },
                        dataType:"text",
                        success: function (data) {
                            $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                        }
                    });
                })
            });

8.使用ajaxSetup()方法设置全局Ajax默认选项
$ajaxSetup([options])
-options：一个对象，通过该对象设置Ajax请求时的全局选项值。

                $.ajaxSetup({               
                type:"POST",
                success:function(data){
                        $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
                });

9.ajaxStart()和ajaxStop()方法绑定Ajax事件
ajaxStart()方法用于在Ajax请求发出前触发函数
$(seleector).ajaxStart(function())
ajaxStop()方法用于在Ajax请求完成后触发函数
$(seleector).ajaxStop(function())