zoukankan      html  css  js  c++  java
  • Jquery重新学习之九[Ajax运用总结C]

    前两篇文章主要介绍Jquery如何利用Ajax进行操作数据,主要介绍调用的方法;其中Jquery.ajax()是Jquery中最底层的方法;Jquery还定义的一个方法跟几个事件为Jquery.ajax ()进行简化跟扩展;

    1:其中全局方法jQuery.ajaxSetup([options])则是为了在使用$.ajax(),有时一个页面需要调用多个$.ajax()方法,如果每个方法都设置其中的请求细节,将是一件十分麻烦的事 。可以一次设置,全局有效,这样大大简化了$.ajax()方法中细节的编写;

    实例代码(只需要设置一个$.ajaxSetup(),其它几个地方调用就不用再编写相同的代码):

    <head>
        <title>$.ajaxSetup()方法全局设置Ajax</title>
        <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
        </script>
        <script type="text/javascript">
            $(function() {
                $.ajaxSetup({ //设置全局性的Ajax选项
                    type: "GET",
                    url: "UserInfo.xml",
                    dataType: "xml"
                })
                $("#Button1").click(function() { //"姓名”按钮的单击事件
                    $.ajax({
                        success: function(data) { //传回请求响应的数据
                            ShowData(data, "姓名", "name"); //显示"姓名"部分
                        }
                    })
                })
                $("#Button2").click(function() { //"性别”按钮的单击事件
                    $.ajax({
                        success: function(data) { //传回请求响应的数据
                            ShowData(data, "性别", "sex"); //显示"性别"部分
                        }
                    })
                })
    
                $("#Button3").click(function() { //"邮箱”按钮的单击事件
                    $.ajax({
                        success: function(data) { //传回请求响应的数据
                            ShowData(data, "邮箱", "email"); //显示"邮箱"部分
                        }
                    })
                })
                /*
                *根据名称与值,获取请求响应数据中的某部分
                *@Param d为请求响应后的数据
                *@Param n为数据中文说明字符
                *@Param d为数据在响应数据中的元素名称
                */
                function ShowData(d, n, v) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $(d).find("User").each(function() { //遍历获取的数据
                        var $strUser = $(this);
                        strHTML += n + "" + $strUser.find(v).text() + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                }
            })
        </script>
    </head>
    <body>
        <div class="divFrame">
             <div class="divTitle">
                  <span><input id="Button1" type="button" value="姓名" class="btn" /></span>
                  <span><input id="Button2" type="button" value="性别" class="btn" /></span>
                  <span><input id="Button3" type="button" value="邮箱" class="btn" /></span>
             </div>
             <div class="divContent">
                  <div id="divTip" class="clsShow"></div>
             </div>
        </div>
    </body>
    </html>

    2:在Jquery中,除了全局性的函数外,还有6个全局性的Ajax事件,由于在使用$.ajax()方法时,其中的选项参数global的值默认情况下为true,这也意味着所有在执行的Ajax的数据请求,都绑定了全局事件;也就是说6个全局性的开关是global属性决定;

    2.1 ajaxStart(callback)和ajaxStop(callback)这两个使用的频率非常高,前者是当请求开始执行时触发,往往用于编写一些准备性的工作,后者是当请求结束时触发;

    实例代码:

    <head>
        <title>Ajax中的全局事件</title>
        <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
        </script>
        <script type="text/javascript">
            $(function() {
    
                //元素绑定全局ajaxStart事件
                $("#divMsg").ajaxStart(function() {
                    $(this).show(); //显示元素
                })
    
                //元素绑定全局ajaxStop事件
                $("#divMsg").ajaxStop(function() {
                    $(this).html("已成功获取数据。").hide();
                })
    
                $("#Button1").click(function() {
                    $.ajax({ //带参数请求服务器
                        type: "GET",
                        url: "GetData.aspx",
                        //获取加码后的数据并作为参数传给服务器
                        data: { txtData: encodeURI($("#txtData").val()) },
                        dataType: "html",
                        success: function(data) { //显示解码后的返回数据
                            $("#divTip").html(decodeURI(data));
                        }
                    })
                })
            })
             </script>
    </head>
    <body>
        <div class="divFrame">
             <div class="divTitle">
                  <span>数据:<input id="txtData" type="text" class="txt" /></span>
                  <span><input id="Button1" type="button" value="发送" class="btn" /></span>
             </div>
             <div class="divContent">
                  <div id="divMsg" class="clsTip">正在发送数据请求…</div>
                  <div id="divTip" class="clsShow"></div>
             </div>
        </div>
    </body>
    </html>
    
    
    其中GetData.aspx代码:
    
        string strName = Request["txtData"]; //返回传回的参数
        Response.Write(strName); //返回传回的参数

    感谢您的阅读,坚持每天进步一点点,离成功就更新一步;希望文章对您有所帮助;

    最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

  • 相关阅读:
    HTML DOM querySelector() 方法
    jsonp和ajax
    开源协议许可
    【开发笔记】- 在Grails下查看打印真实的SQL
    【开发笔记】-MySQL数据库5.7+版本,编码格式设置
    【开发笔记】-Tomcat启动时设置Jdk版本
    来自GitHub的优秀开源项目系列
    【开发笔记】- 将MySQL数据库表中自增ID从0开始
    【开发笔记】- 在MySQL中 root账户被锁定怎么办
    【开发笔记】- 在Windows环境下后台启动redis
  • 原文地址:https://www.cnblogs.com/wujy/p/3551339.html
Copyright © 2011-2022 走看看