实例入门Ajax(改进)

来源：互联网发布：淘宝客工具编辑：程序博客网时间：2024/05/25 18:12

前台

<!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 runat="server">  
    <title>浮动广告</title>  
    <script src="jquery/jquery-1.2.6.js" type="text/javascript"></script>  
    <script type="text/javascript">  
     $(document).ready(function(){
      $("#getids").click(function(){
         doRequestUsingGET();
      })
       $("#postids").click(function(){
         doRequestUsingPOST();
      })
    });
     function doRequestUsingGET(){
      var firstName=$("#firstName").val();
       var birthday=$("#birthday").val();
        $.get("AjaxServe.aspx",{name:firstName,birthday:birthday},
            callback_state,"json");
     }
     function doRequestUsingPOST(){
     var firstName=$("#firstName").val();
       var birthday=$("#birthday").val();
        $.post("AjaxServe.aspx",{name:firstName,birthday:birthday},
            function(data,textStatus){
               $("#serverResponse").html(data.info);
            },"json");
     }
     
     function callback_state(data){
        $("#serverResponse").html(data.info+"<br/>"+data.name);
     }
     
    </script>  
</head>  
<body>    
   <h2>输入姓名和生日</h2>
 <form>
  <input type="text" id="firstName" /><br />
  <input type="text" id="birthday" />
  <input type="button" value="GET"  id="getids"/><br />
  <input type="button" value="POST"  id="postids"/>
 </form>
 <div id="serverResponse"></div>
</body>  
</html>  

后台

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class AjaxServe : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Hashtable ht = new Hashtable();
        string name = Request.Params["name"].ToString();
        string birth = Request.Params["birthday"].ToString();
        if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(birth))
        {
            //Response.ContentType = "Application/json"; 
            ht.Add("info", "成功了");
            ht.Add("sta", "状态");
            ht.Add("name", name);
            ht.Add("birth", birth);
            Response.Write(CreateJsonParams(ht));
        }
        Response.End();
    }
    private string CreateJsonParams(Hashtable items)
    {
        string returnStr = "";
        foreach(DictionaryEntry item in items)
        {
            returnStr += "/"" + item.Key.ToString() + "/":/"" + item.Value.ToString() + "/",";
        }
        return "{" + returnStr.Substring(0,returnStr.Length-1) + "}";
    }
}