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

(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); //返回传回的参数
%>
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页
实付 99.00元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值