[JQ权威指南]JQuery中的全局事件

最新推荐文章于 2022-11-09 11:45:50 发布

厦门德仔

最新推荐文章于 2022-11-09 11:45:50 发布

阅读量2.9k

点赞数 1

分类专栏： # JQuery 文章标签：全局事件

本文链接：https://blog.csdn.net/david_520042/article/details/51979070

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

(1)功能描述
创建一个HTML页面，设置一个文本框和一个按钮，单击"请求"按钮后，获取文本框数据，向服务器发送请求，服务器响应请求后，返回对应的数据，在数据交互过程中，请求开始时，厨房绑定的ajaxStop全局事件，将"正在发送数据请求..."改成"已成功获取数据并隐藏起来"。
(2)实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax中的全局事件</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:325px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;height:30px}
           .divFrame .divTitle span{float:left;padding:2px;padding-top:5px}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .divFrame .divContent .clsTip{width:160px;text-align:center;font-size:13px;border:solid 1px #cc3300;padding:2px;margin-bottom:5px;background-color:#ffe0a3}
           .txt{border:#666 1px solid;padding:2px;width:160px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:65px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <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

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<% 
    string strName = Request["txtData"]; //返回传回的参数
    Response.Write(strName); //返回传回的参数
%>

厦门德仔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
[JQ权威指南]JQuery中的全局事件

(1)功能描述创建一个HTML页面，设置一个文本框和一个按钮，单击"请求"按钮后，获取文本框数据，向服务器发送请求，服务器响应请求后，返回对应的数据，在数据交互过程中，请求开始时，厨房绑定的ajaxStop全局事件，将"正在发送数据请求..."改成"已成功获取数据并隐藏起来"。(2)实现代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
复制链接

扫一扫