jQuery ajax学习2

来源：互联网发布：网络集成技术课后答案编辑：程序博客网时间：2024/05/17 04:54

1、jQuery ajax试试手

<!DOCTYPE html>
<html>   
    <head>
        <title>
            JQuery ajax应用
        </title>
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){              
                $("#btn1").click(function(){                   
                    // 点击事件里面发送一个ajax请求
                    $.ajax({
                                    url : "demo_test.txt",  //请求地址
                                    success : function(result){
                                                            $("#p1").html(result); //成功回调函数
                                                        }
                                });                    
                });                
            });        
        </script>
    </head>  
    <body>
        <p id="p1">jQuery ajx应用</p>    
        <input type="button" id="btn1" value="点一下">
    </body>
</html>

点击按钮，将p中的文件内容修改，通过ajax请求.

2、ajax函数解析

语法：

$.ajax({

name : value,

...

});

其中，参数如下图

麦库截图20161008103002622.jpg

麦库截图20161008103020890.jpg

3、实例解析

1）指定响应数据类型dataType

1

2

3

4

5

6

$("#btn2").click(function(){
                    $.ajax({
                            url :  "demo_ajax_script.js",
                            dataType : "script"
                        });
                });

2）各中状态下的回调函数

$("#btn3").click(function(){
                    $.ajax({
                            url : "",
                            beforeSend : function(){
                                $("#div1").css({"background-color" : "red" , "width":"80px","height":"80"});
                                console.log("beforeSend");
                            },
                            complete : function(){
                                $("#div1").css({"background-color" : "green" , "width":"80px","height":"80"});
                                console.log("complete");
                            },
                            error : function(){
                                $("#div1").css({"background-color" : "black" , "width":"40px","height":"40"});
                                console.log("error");
                            }
                        });
                });

得到console中的返回值

麦库截图20161108111942547.jpg

由此可以看出ajax调用的顺序

beforeSend --> success/error --> complete

无论成功与否，最终都会调用complete回调方法，相当于java中的finally

4、ajaxSetup()方法

用于设置ajax的参数

$("#btn1").click(function(){                   
                    // 点击事件里面发送一个ajax请求
                    $.ajaxSetup({
                                            url : "demo_test.txt",  //请求地址
                                            success : function(result){
                                                                    $("#p1").html(result); //成功回调函数
                                                                }
                                        });
                    $.ajax();                      
                });

5、get()方法

发送一个get请求到指定url地址

参数

麦库截图20161308135204627.jpg

语法：$.get(URL,data,function(data,status,xhr),dataType)

<!DOCTYPE html>
<html>   
    <head>
        <title>
            JQuery ajax应用
        </title>
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
                $(function(){
                    $("#btn1").click(function(){
                        $.get(
                            "/try/ajax/gethint.php?q="+$("#txt1").val(),//url
                            function(data , status){
                                $("p").html(data);
                            }//回调方法
                        );
                    });
                });
        </script>
    </head>  
    <body>
        <p>ajax 的Get和POST方法</p>
        <input type="text" id="txt1"><br>
        <input type="button" id="btn1" value="点一下">
        <p></p>
    </body>
</html>

$.post()方法

麦库截图20161508152724180.jpg

事例

//post方法
                        $.post(
                            "demo_ajax_gethint.php",//url
                            {suggest : $("#txt1").val()},//参数
                            function(data, status){
                                $("p:eq(1)").html(data);
                            }//回调函数
                        );

get()和post()方法均可以用ajax()代替

$.ajax({
                            type:"POST",
                            url : "demo_ajax_gethint.php",
                            data : "suggest=" + $("#txt1").val(),
                            success : function(data){
                                $("p:eq(1)").html(data);
                            }
                        });

0 0