第六篇 ajax

時間 2019-11-10

標籤第六 ajax 欄目 Ajax 简体版

原文原文鏈接

加載異步數據javascript

6-1 加載異步數據 css

XMLHttpRequest--傳統的JavaScript方法實現Ajax功能html

6-1-ajava

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XMLHttpRequest--傳統的JavaScript方法實現Ajax功能</title>
<style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
</style>

<script>
  var objXmlHttp = null //聲明一個空的XMLHTTP變量
  
  function CreateXMLHttp()
  {
      //根據瀏覽器的不一樣,返回該變量的實體對象
      if(window.ActiveXObject)
      {
          objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
          if(window.XMLHttpRequest)
          {
              objXmlHttp = new XMLHttpRequest();
          }
          else
          {
              alert("初始化XMLHTTP錯誤！");
          }
      }
  }
  
  
  function GetSendData()
  {
      //
      document.getElementById("divTip").innerHTML = "<img alt='' title='' src='' />";
      //
      var strSendUrl = "6-1-b.html?date=" + Date();
      //
      CreateXMLHttp();
      //
      objXmlHttp.open("GET",strSendUrl,true);
      objXmlHttp.onreadystatechange = function()
      {
          if(objXmlHttp.readyState == 4)
          {
              if(objXmlHttp.statue == 200)
              {
                  //
                  document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
              }
          }
      }
      //
      objXmlHttp.send(null);
  }
  
</script>
</head>
<body>

  <div class="divFrame">
    <div class="divTitle">
      <input id="Button1" type="button" onclick="GetSendData()" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
    </div>
  </div>

</body>
</html>

6-1-bjquery

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
</script>
</head>
<body>
  <div class="clsShow">
    姓名：陶國榮<br />
    性別：男<br />
    郵箱：tao_guo_rong@163.com
  </div>
</body>
</html>

6-2 jQuery:load()方法ajax

load(url,[data],[callback]) --獲取異步數據
--url:被加載的頁面技術
--[data]:表示發送到服務器的數據，格式爲：key/value
--[callback]:回調函數json

<!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></title>
    <style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
</style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //load(url,[data],[callback]) --獲取異步數據
            //url--被加載的頁面技術
            //[data]--表示發送到服務器的數據，格式爲：key/value
            //[callback]--回調函數
            $("#Button1").click(function () {
                $("#divTip").load("a.htm .clsShow", function (data) {
                    $("#divTip").html(data)
                });
                //a.htm .clsShow a.htm頁面中類別名爲.clsShow的所有元素
                //$("#divTip").load("a.htm");
            });
        })
    </script>
</head>
<body>
  <h2>6-2-a</h2>
  <div class="divFrame">
    <div class="divTitle">
      <input id="Button1" type="button" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
    </div>
  </div>
</body>
</html>

6-3 getJSON()瀏覽器

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON</title>
<style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    //*******
    //JSON文件格式--一種輕量級的數據交互格式
    //$.getJSON(url,[data],[callback])
    //--url:被加載的頁面技術
    //--[data]:表示發送到服務器的數據，格式爲：key/value
    //--[callback]:回調函數
    $("#Button1").click(function(){
      //
      $.getJSON('demo.js',function(date){
        $("#divTip").empty();
        var strHTML="";
        $.each(date,function(InfoIndex,Info){
          strHTML += "姓名:" + Info["name"] + "<br>";
          strHTML += "性別:" + Info["sex"] + "<br>";
          strHTML += "郵箱:" + Info["email"] + "<hr>";
        })
        $("#divTip").html(strHTML);
      })
    })
  })
</script>
</head>
<body>
  <h2>6-3:getJSON</h2>
  <div class="divFrame">
    <div class="divTitle">
      <input id="Button1" type="button" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
    </div>
  </div>
</body>
</html>

6-4 getScript()緩存

全局函數getScript()獲取.js文件的內容.服務器

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getScript</title>
<style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //******
  //$.getScript(url,[callback])
  
  $(function(){
    //
    $("#Button1").click(function(){
      //
      $.getScript("UserInfo.js",function(){
            $("#test").html("ok!");
          });
    })
  })
</script>
</head>
<body>

  <h2>6-4:getScript</h2>
  <div class="divFrame">
    <div class="divTitle">
      <input id="Button1" type="button" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
      <div id="test"></div>
    </div>
  </div>

</body>
</html>

js文件

// JavaScript Document
var data =[
  {
    "name":"吳者然",
    "sex":"男",
    "email":"demo1@123.com"
  },
  {
    "name":"吳中者",
    "sex":"男",
    "email":"demo2@123.com"
  },
  {
    "name":"何開",
    "sex":"女",
    "email":"demo3@123.com"
  },
  {
      "name":"zq",
      "sex":"man",
      "email":"zq@zq.com"
  }
]
var strHTML="";
$.each(data,function(){
  strHTML += "姓名:" + this["name"] + "<br>";
  strHTML += "性別:" + this["sex"] + "<br>";
  strHTML += "郵箱:" + this["email"] + "<hr>";
});
$("#divTip").html(strHTML);

6-5 異步加載XML文檔

$.get(url,[data],[callback],[type])

--url:加載的數據地址

--[data]:發送到服務器的數據，key/value

--[callback]:加載成功時執行的回調函數

--[type]:返回數據的格式--html,xml,js,json,text

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>get()--XML</title>
<style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    $("#Button1").click(function(){
      //打開文件，並經過回調函數處理獲取的數據
      $.get("UserInfo.xml",function(data){
        var strHTML="";
        $(data).find("User").each(function() {
           var $strUser = $(this);
           strHTML += "姓名:" + $strUser.find("name").text()+"<br>";
           strHTML += "性別:" + $strUser.find("sex").text()+"<br>";
           strHTML += "郵箱:" + $strUser.find("email").text()+"<hr>";
        });
        $("#divTip").html(strHTML);
      });
    })
  })
</script>
</head>
<body>

  <h2>6-5:XML</h2>
  <div class="divFrame">
    <div class="divTitle">
      <input id="Button1" type="button" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
      <div id="test"></div>
    </div>
  </div>

</body>
</html>

xml:

<?xml version="1.0" encoding="utf-8"?>
<Info>
  <User id ="1">
    <name>qq</name>
    <sex>male</sex>
    <email>qq@qq.com</email>
  </User>
  <User id ="2">
    <name>ww</name>
    <sex>female</sex>
    <email>ww@ww.com</email>
  </User>
</Info>

請求服務器數據

6-6 $.get()向服務器請求數據

***客戶端向服務器傳遞參數時，使用的格式是{key0:value0,key1:value1,.......},"key0"爲參數名稱,"value0"爲參數的值。

***若是參數的值是中文格式，必須經過使用encodeURI()進行轉碼，固然，在客戶端接受時，使用decodeURL()進行解碼。

<!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>get</title>
    <style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
        #txtName
        {
            width: 122px;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            $("#Button1").click(function () {
                //打開文件，並經過回調函數返回服務器響應後的數據
                $.get("UserInfo.aspx", {
                    name: encodeURI($("#txtName").val())
                }, function (data) {
                    $("#divTip").empty().html(data);
                });
            });
        })
        
    </script>

</head>
<body>

  <h2>6-6:get()</h2>
  <div class="divFrame">
    <div class="divTitle">
      姓名：<input id="txtName" type="text"  /><input id="Button1" type="button" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
      <div id="test"></div>
    </div>
  </div>

</body>
</html>

服務器端文件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserInfo.aspx.cs" Inherits="WebApplication1.UserInfo" %>

<%

    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);
    string strHTML = "<div class='clsShow'>";
    if (strName == "qq")
    {
        strHTML += "name:qq<br>";
        strHTML += "sex:qq<br>";
        strHTML += "mail:qq@qq.com<hr>";
    }
    else if (strName == "ww")
    {
        strHTML += "name:ww<br>";
        strHTML += "sex:ww<br>";
        strHTML += "mail:ww@ww.com<hr>";
    }
    else
    {
        strHTML += "沒有找到！<hr>";
    }
    strHTML += "</div>";
    Response.Write(strHTML);
    
     %>

6-7 $.post()

**$.get()與$.post()區別：

**GET方式不適合傳遞數據量較大的數據，其請求的歷史信息會保存在瀏覽器的緩存中；POST則不存在

--$.post(url,[data],[callback],[type])

<!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>post</title>
     <style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
        #txtName
        {
            width: 122px;
        }
     </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {
                //
                $.post("UserInfo.aspx", {
                    name: encodeURI($("#txtName").val())
                }, function (data) {
                    $("#divTip").empty().html(data);
                });
            });
        })
    </script>
</head>
<body>
  <h2>6-7:post()</h2>
  <div class="divFrame">
    <div class="divTitle">
      姓名：<input id="txtName" type="text"  /><input id="Button1" type="button" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
      <div id="test"></div>
    </div>
  </div>
</body>
</html>

6-8 serialize()序列化表單

**serialize()方法能夠很完美地模擬瀏覽器提交表單的操做，同時自動解決了中文編碼的問題，但它自身有不少不足，如表單中有多項被選中時，該方法只能傳遞一項的值。所以，在選擇傳遞參數時，須慎重考慮。

<!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>serialize()序列化表單</title>
     <style type="text/css">
     body{ font-size:13px;}
    .divFrame{ width:260px; border:solid 1px #666;}
    .divFrame .divTitle{ padding:5px; background-color:#eee;}
    .divFrame .divContent{ padding:8px;}
    .divFrame .divContent .clsShow{ font-size:14px;}
    .btn{ border:#666 1px solid; padding:2px; width:80px;}
     </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function () {
                //
                //serialize()序列化表單
                $.post("UserInfo2.aspx", $("#frmUserInfo").serialize(),
                function (data) {
                $("#divTip").empty().html(data);
                });
                /*
                $.post("UserInfo2.aspx", {
                    name: encodeURI($("#txtName").val()),
                    sex:encodeURI($("#txtSex").val())
                }, function (data) {
                    $("#divTip").empty().html(data);
                });
                */
            });
        })
    </script>
</head>
<body>
<h2>6-8:serialize()</h2>
 <form id="frmUserInfo">
  <div class="divFrame">
    <div class="divTitle">
      姓名：<input id="txtName" type="text"  /><br />
       郵箱：<input id="txtSex" type="text"  /><br />
      <input id="Button1" type="button" class="btn" value="獲取數據" />
    </div>
    <div class="divContent">
      <div id="divTip"></div>
      <div id="test"></div>
    </div>
  </div>
  </form>
</body>
</html>

$.ajax()方法

6-9 $.ajax([options])

**參數

--url:string 發送請求的地址

--type:string 數據請求方式(post/get)，默認是get

--data:string/object 發送到服務器的數據，字符串格式（get：字符串在URL後面）

--dataType:string 服務器返回的數據類型。html,script,text,xml,json

--beforeSend:function

--complete:function 請求完成後調用的回調函數

--success:function 請求成功後調用的回調函數，有兩個參數，一個是根據參數dataType處理後服務器返回的數據，另外一個是strStatus，用於描述成功請求類型的字符串

--error:function 請求失敗後調用的回調函數

--timeout:Number 請求超時的時間(毫秒)

--global:boolean 是否響應全局事件

--async:boolean 是否爲異步請求，true,false

--cache:boolean 是否進行頁面緩存，true，false

<!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></title>
    <style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
     </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#btnLogin").click(function () {
                var userName = encodeURI($("#txtName").val());
                var userPass = encodeURI($("#txtPass").val());

                $.ajax({
                    url: "Login.aspx",
                    typr:"post",
                    dataType: "text",
                    data: { txtName: encodeURI($("#txtName").val()), txtPass: encodeURI($("#txtPass").val()) },
                    success: function (data) {
                        if (data == "1") {
                            $("#divError").show().html("ok!");
                            //alert(data);
                        }
                        else {
                            //alert(data);
                            $("#divError").show().html("error!");
                        }
                    }
                })
            });
        })
    </script>

</head>

<body>

<div class="divFrame">
  <div class="divTitle">
    <span>用戶登陸</span>
  </div>

  <div class="divContent">
    <div class="clsShow">
      <div id="divError" class="clsError"></div>
      <div>名稱:<input id="txtName" type="text" class="txt" /></div>
      <div>密碼:<input id="txtPass" type="text" class="txt" /></div>

      <div>
        <input id="btnLogin" type="button" value="登陸" class="btn" />&nbsp;
        <input id="btnReset" type="button" value="取消" class="btn" />
      </div>

    </div>
  </div>
</div>

</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication1.Login" %>

<%
      
    string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);
    string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
    var blnLogin = 0;
    if (strName == "admin" && strPass == "admin")
    {
        blnLogin = 1;
    }
    Response.Write(blnLogin);
      
       %>

**$.ajax()方法時jQuery中最底層的方法，全局函數$.getScript(),$.get(),$.post(),$.getJSON()均可以用$.ajax()方法進行代替。

6-10 $.ajaxSetup()設置全局Ajax

**$.ajaxSetup([options]) , [options]是一個對象，經過該對象能夠設置$.ajax()方法中的參數。

<!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>$.ajaxSetup()方法全局設置ajax</title>
     <style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
     </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //全局設置
            $.ajaxSetup({
                type: "GET",
                url: "UserInfo.xml",
                dataType: "xml"
            });

            $("#Button1").click(function () {
                success: function (data) {
                    //ShowData(data, "姓名", "name");
                    $("#divTip").html("姓名");
                }
            });
            $("#Button2").click(function () {
                success: function (data) {
                    //ShowData(data, "性別", "sex");
                    $("#divTip").html("性別");
                }
            });
            $("#Button3").click(function () {
                success: function (data) {
                    //ShowData(data, "郵箱", "email");
                    $("#divTip").html("郵箱");
                }
            });

            /*
            *showData
            *d爲請求響應後的數據
            *n爲數據中文說明字符
            *v爲數據在響應數據中的元素名稱
            */
            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" value="姓名" type="button" class="btn" /></span>
     <span><input id="Button2" value="性別" type="button" class="btn" /></span>
     <span><input id="Button3" value="郵箱" type="button" class="btn" /></span>
   </div>
   <div class="divContent">
     <div id="divTip" class="clsShow"></div>
   </div>
 </div>

</body>
</html>

UserInfo.xml

<?xml version="1.0" encoding="utf-8" ?>

<Info>
  <User id ="1">
    <name>qq</name>
    <sex>male</sex>
    <email>qq@qq.com</email>
  </User>
  <User id ="2">
    <name>ww</name>
    <sex>female</sex>
    <email>ww@ww.com</email>
  </User>
</Info>

Ajax中的全局事件

--ajaxComplete(callback)

--ajaxError(callback)

--ajaxSend(callback)

--ajaxStart(callback)

--ajaxStop(callback)

--ajaxSuccess(callback)

<!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>
     <style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:260px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent .clsShow{ font-size:14px;}
  .clsTip{ display:none;}
  .btn{ border:#666 1px solid; padding:2px; width:80px;}
         #txtData
         {
             width: 115px;
         }
     </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //
            $("#divMsg").ajaxStart(function () {
                $(this).show();
            });

            $("#divMsg").ajaxStop(function () {
                $(this).html("已成功獲取數據").hide(2000);
            });

            $("#Button1").click(function () {
                $.ajax({
                    type: "GET",
                    url: "GetData.aspx",
                    data: { txtData: encodeURI($("#txtData").val()) },
                    dataType: "html",
                    success: function (data) {
                        var str = decodeURI(data).substr(0, 2);
                        $("#divTip").html(str);
                    }
                });
            });
        })
    </script>
</head>
<body>

   <div class="divFrame">
   <div class="divTitle">
     <span>數據：<input id="txtData" type="text" /></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#" AutoEventWireup="true" CodeBehind="GetData.aspx.cs" Inherits="WebApplication1.GetData" %>

<%
    
    string strName = Request["txtData"];
    Response.Write(strName);
     %>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。