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 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

  • 相关阅读:
    Java 8 Lambda 表达式
    OSGi 系列(十二)之 Http Service
    OSGi 系列(十三)之 Configuration Admin Service
    OSGi 系列(十四)之 Event Admin Service
    OSGi 系列(十六)之 JDBC Service
    OSGi 系列(十)之 Blueprint
    OSGi 系列(七)之服务的监听、跟踪、声明等
    OSGi 系列(六)之服务的使用
    OSGi 系列(三)之 bundle 事件监听
    OSGi 系列(三)之 bundle 详解
  • 原文地址:https://www.cnblogs.com/wujy/p/3551339.html
Copyright © 2011-2022 走看看