zoukankan      html  css  js  c++  java

  • jQuery -- 光阴似箭（五）：AJAX 方法

    jQuery -- 知识点回顾篇（五）：AJAX 方法

    1. $.ajax 方法：用于执行 AJAX（异步 HTTP）请求。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" >    
        $(function(){ 
            //语法格式：$.ajax({name:value, name:value, ... })
            //该参数规定 AJAX 请求的一个或多个名称/值对。
            $("#btn_ajax").click(function(){
                $.ajax({
                    url:"Test_ajax.aspx",
                    success:function(result){
                        $("#myDiv1").html(result);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    2. $.ajaxSetup() 方法：为将来的 AJAX 请求设置默认值。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){ 
            //语法格式：$.ajaxSetup({name:value, name:value, ... })
            //该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。
            $("#btn_ajax").click(function(){
                $.ajaxSetup({
                    url:"Test_ajax.aspx",
                    success:function(result){
                        $("#myDiv1").html(result);
                    }
                });
                $.ajax();
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    3. $.get() 方法：使用 HTTP GET 请求从服务器加载数据。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" >    
        $(function(){ 
            //语法格式：$.get(URL,data,function(data,status,xhr),dataType)
            //URL: 必需参数。规定您需要请求的 URL。
            //data:    可选参数。规定连同请求发送到服务器的数据。
            //function(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
            //dataType：可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){
                $.get("Test_ajax.aspx",function(data){
                    alert("数据: " + data );
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    4. $.getJSON() 方法：使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_ajax").click(function(){
                //语法格式： $(selector).getJSON(url,data,success(data,status,xhr))
                //url：必需参数。规定将请求发送到哪个 URL。
                //data：可选参数。规定发送到服务器的数据。
                //success(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
                $.getJSON("Test_ajax.aspx",function(result){
                        $("myDiv1").text(result);
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    5. $.getScript() 方法：使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_ajax").click(function(){
                //语法格式： $(selector).getScript(url,success(response,status))
                //url: 必需参数。规定将请求发送到哪个 URL。
                //success(response,status)： 可选参数。规定当请求成功时运行的函数。
                $.getScript("Test_ajax_script.js");
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="210px;height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    6. $.param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            personObj=new Object();
            personObj.name="xiaohuzi";
            personObj.age=26;
            personObj.web="xiaohuzi.test.com"; 
            //语法格式：$.param(object,trad)
            //object: 必需参数。规定要序列化的数组或对象。
            //trad: 可选参数。布尔值，指定是否使用参数序列化的传统样式。
            $("#btn_ajax").click(function(){
                $("#myDiv1").text($.param(personObj));
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    7. $.post() 方法：使用 HTTP POST 请求从服务器加载数据。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            //语法格式：$(selector).post(URL,data,function(data,status,xhr),dataType)
            //URL: 必需参数。规定将请求发送到哪个 URL。
            //data: 可选参数。规定连同请求发送到服务器的数据。
            //function(data,status,xhr): 可选参数。规定当请求成功时运行的函数。
            //dataType: 可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){
                $.post("Test_ajax.aspx",function(data){
                    alert("Data: " + data );
                });
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    8. ajaxComplete() 方法：规定 AJAX 请求完成时运行的函数。

    　ajaxStart() 方法：规定 AJAX 请求开始时运行的函数。

       ajaxSend() 方法：规定 AJAX 请求即将发送时运行的函数。

       ajaxError() 方法：规定 AJAX 请求失败时运行的函数。

       ajaxStop() 方法：规定所有的 AJAX 请求完成时运行的函数。

       ajaxSuccess() 方法：规定 AJAX 请求成功完成时运行的函数。

       load() 方法：从服务器加载数据，并把返回的数据放置到指定的元素中。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            //语法格式：$(document).ajaxSend(function(event,xhr,options))
            //function(event,xhr,options)     必需。规定当请求成功时运行的函数。
            $(document).ajaxSend(function(){
                $("#myDiv1").css("border","5px solid pink");
            });
            //语法格式：$(document).ajaxStart(function())
            //function(): 必需参数。规定当 AJAX 请求开始时运行的函数。
            $(document).ajaxStart(function(){
                $("#myDiv1").css("display","block");
            });
            //语法格式：$(document).ajaxStop(function())
            //function(): 必需参数。规定所有的 AJAX 请求完成时运行的函数。
            $(document).ajaxStop(function(){
                $("#myDiv1").css("border","3px solid green");
            });
            //语法格式：$(document).ajaxError(function(event,xhr,options,exc))
            //function(event,xhr,options,exc)：必需参数。规定当请求失败时运行的函数。
            $(document).ajaxError(function(){
                $("#myDiv1").css("border","3px solid red");
            });
            //语法格式：$(document).ajaxSuccess(function(event,xhr,options))
            //function(event,xhr,options): 必需参数。规定如果请求成功时运行的函数。
            $(document).ajaxSuccess(function(){
                $("#myDiv1").css("border","3px solid yellow");
            });
            //语法格式：$(document).ajaxComplete(function(event,xhr,options))
            //function(event,xhr,options)： 必需参数。规定当请求完成时运行的函数。
            $(document).ajaxComplete(function(){
                $("#myDiv1").css("display","none");
            });

            //语法格式：$(selector).load(url,data,function(response,status,xhr))
            //url：必需参数。规定您需要加载的 URL。
            //data：可选参数。规定连同请求发送到服务器的数据。
            //function(response,status,xhr)：可选参数。规定 load() 方法完成时运行的回调函数。
            $("#btn_ajax").click(function(){
                $("#txt").load("Test_ajax.aspx");
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_ajax">ajax</button>
    <div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
    </div>   
</body>
</html>

    9. serialize() 方法：通过序列化表单值创建 URL 编码文本字符串。

        serializeArray() 方法：通过序列化表单值来创建对象（name 和 value）的数组。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            //语法格式：$(selector).serialize()
            //您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
            //序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
            $("#btn_serialize").click(function(){
                $("#myDiv1").text($("form").serialize());
            });
            //语法格式：$(selector).serializeArray()
            //serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
            //您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
            $("#btn_serializeArray").click(function(){
                x=$("form").serializeArray();
                $.each(x, function(i, field){
                    $("#myDiv2").append(field.name + ":" + field.value + "   ");
                });
            });
        });
    </script>
</head>
<body>
    <form action="">
    姓名: <input type="text" name="Name" value="XiaoHuzi" /><br>
    年龄: <input type="text" name="Age" value="26" /><br>
    工作: <input type="text" name="Job" value="IT" /><br>
    </form>
    <button type="button" id="btn_serialize">serialize</button>
    <button type="button" id="btn_serializeArray">serializeArray</button>
    <div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
    </div> 
    <div id="myDiv2" style="height:30px;padding: 10px;border:2px solid green;">
    </div>   
</body>
</html>

    　　
  • 相关阅读:
    UVa OJ 148 Anagram checker (回文构词检测）
    UVa OJ 134 LoglanA Logical Language (Loglan逻辑语言)
    平面内两条线段的位置关系(相交)判定与交点求解
    UVa OJ 130 Roman Roulette (罗马轮盘赌)
    UVa OJ 135 No Rectangles (没有矩形)
    混合函数继承方式构造函数
    html5基础（第一天）
    js中substr,substring,indexOf,lastIndexOf,split等的用法
    css的textindent属性实现段落第一行缩进
    普通的css普通的描边字
  • 原文地址：https://www.cnblogs.com/ChengWenHao/p/JQueryPart5.html
Copyright © 2011-2022 走看看