AJAX调用方式总结(2)

来源：互联网发布：div调用js方法编辑：程序博客网时间：2024/06/07 19:34

长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深。

实例二：利用$.get，$.post方法获取当前时间

$.get():

定义：get()方法通过远程HTTP GET请求载入信息

语法：$(selector).get(url,data,success(response,status,xhr),dataType)

参数

url：必须，请求发送的地址。

data：可选，发送到服务器的数据。

success：可选，请求成功时运行的函数

1).response：包含结果的数据

2).status:包含请求的状态

3).xhr:包含XmlHttpRequest对象

dataType：服务器响应的数据类型，默认将智能判断

$.post()

定义：post()方法通过远程HTTP Post请求载入信息

语法：$(selector).post(url,data,success(data,status,jqXHR),dataType)

参数

url：必须，请求发送的地址。

data：可选，发送到服务器的数据。

success：可选，请求成功时运行的函数

1).data：包含结果的数据

2).status:包含请求的状态

3).jqXHR:包含XmlHttpRequest对象

dataType：服务器响应的数据类型，默认将智能判断

由于实例相当简单，直接上所有代码：

protected void Page_Load(object sender, EventArgs e)  
       {  
           string time = "";  
           //Get  
           if (Request.QueryString["time"]!=null)  
           {  
               time = "Get:"+ Request.QueryString["time"].ToString();  
           }  
           //Post  
           if (Request.Form["time"] != null)  
           {  
               time = "Post:" + Request.Form["time"].ToString();  
           }  
 
           Response.Write(time + "  现在：" + DateTime.Now.ToString());  
           Response.End();  
       }

前台获取时间

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>  
 <script type="text/javascript">  
     $(function () {  
         //参数：直接在页面之后加？拼加  
         $("#btnGet").click(function () {  
             $.get("data.aspx?time=" + new Date(), Succeed);  
         });  
 
         //参数：使用键值来表示需要传递的参数  
         $("#btnPost").click(function () {  
             $.post("data.aspx", { time: new Date() }, Succeed);  
         });  
     });  
 
     function Succeed(result) {  
         $("#tbShow").val(result);  
     }  
 </script>

<body> 
    <form id="form1" runat="server"> 
        <div> 
          <input type="text" id="tbShow"/> 
          <input type="button" id="btnGet" value="get方法" /> 
          <input type="button" id="btnPost" value="post方法" /> 
          <input type="button" id="btnAjax" value="ajax方法" /> 
        </div> 
    </form> 
</body>