javascript代码实例教程-Jquery重新学习之九[Ajax运用总结C]

发布时间:2019-02-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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) {

                $("#pTip").empty(); //先清空标记中的内容

                VAR strHTML = ""; //初始化保存内容变量

                $(d).find("User").each(function() { //遍历获取的数据

                    var $strUser = $(this);

                    strHTML += n + ":" + $strUser.find(v).text() + "<hr>";

                })

                $("#pTip").html(strHTML); //显示处理后的数据

            }

        })

    </script>

</head>

<body>

    <p class="pFrame">

         <p class="pTitle">

              <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>

         </p>

         <p class="pContent">

              <p id="pTip" class="clsShow"></p>

         </p>

    </p>

</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事件

            $("#pMsg").ajaxStart(function() {

                $(this).show(); //显示元素

            })

 

            //元素绑定全局ajaxStop事件

            $("#pMsg").ajaxStop(function() {

                $(this).html("已成功获取数据。").hide();

            })

 

            $("#Button1").click(function() {

                $.ajax({ //带参数请求服务器

                    type: "GET",

                    url: "GetData.aspx",

                    //获取加码后的数据并作为参数传给服务器

                    data: { txtData: encodeURI($("#txtData").val()) },

                    dataType: "html",

                    success: function(data) { //显示解码后的返回数据

                        $("#pTip").html(decodeURI(data));

                    }

                })

            })

        })

         </script>

</head>

<body>

    <p class="pFrame">

         <p class="pTitle">

              <span>数据:<input id="txtData" type="text" class="txt" /></span>

              <span><input id="Button1" type="button" value="发送" class="btn" /></span>

         </p>

         <p class="pContent">

              <p id="pMsg" class="clsTip">正在发送数据请求…</p>

              <p id="pTip" class="clsShow"></p>

         </p>

    </p>

</body>

</html>

 

 

其中GetData.aspx代码:

 

    string strName = Request["txtData"]; //返回传回的参数

    Response.Write(strName); //返回传回的参数

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery重新学习之九[Ajax运用总结C]全部内容,希望文章能够帮你解决javascript代码实例教程-Jquery重新学习之九[Ajax运用总结C]所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。