zoukankan      html  css  js  c++  java

  • WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法，获取数据

    WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法，获取数据

    WebForm1.aspx 页面 (原生AJAX请求，写法一)

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IsPostBack.WebForm1" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head runat="server">  
    7.     <title></title>  
    8.     <script src="jquery-1.11.2.js" type="text/javascript"></script>  
    9.     <script type="text/javascript">  
    10.         function btnClick() {  
    11.             var xmlhttp = new XMLHttpRequest();  
    12.             if (!xmlhttp) {  
    13.                 alert("创建xmlhttp对象异常");  
    14.                 return false;  
    15.             }  
    16.   
    17.             xmlhttp.open("POST", "WebForm1.aspx", true);  
    18.             xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    19.   
    20.             xmlhttp.onreadystatechange = function () {  
    21.   
    22.                 if (xmlhttp.readyState == 4) {  
    23.   
    24.                     if (xmlhttp.status == 200) {  
    25.   
    26.                         var str = xmlhttp.responseText; // 通过alert(str)得知 str={"Json":[{"Id":"1","UserName":"张三","Age":"25","Gender":"0"}]}    
    27.                         //debugger;    
    28.                         var obj = $.parseJSON(str); //将str这个字符串转换成Json对象     
    29.   
    30.                         var name = obj.Json[0].UserName; //obj.Json取到的是[{"Id":"1","UserName":"张三","Age":"25","Gender":"0"}] 这个数组，数组里只有一个值，即：{"Id":"1","UserName":"张三","Age":"25","Gender":"0"}   所以obj.Json[0]的值就是{"Id":"1","UserName":"张三","Age":"25","Gender":"0"} ； 而这个{"Id":"1","UserName":"张三","Age":"25","Gender":"0"} 是一个对象，所以可以通过 .UserName来获得 "张三" 这个值    
    31.   
    32.                         var age = obj.Json[0].Age;  
    33.   
    34.   
    35.                         document.getElementById("name").innerHTML = name;  
    36.                         document.getElementById("age").innerHTML = age;  
    37.   
    38.                     }  
    39.                     else {  
    40.                         alert("ajax服务器错误");  
    41.                     }  
    42.                 }  
    43.   
    44.             }  
    45.             xmlhttp.send("id=1");  
    46.   
    47.         }    
    48.     </script>  
    49. </head>  
    50. <body>  
    51.     <form id="form1" runat="server">  
    52.     <div>  
    53.         <table id="t1"border="1px">  
    54.             <tr><td>姓名</td><td>年龄</td></tr>  
    55.             <tr><td id="name"></td><td id="age"></td></tr>  
    56.         </table>  
    57.          <input type="button" onclick="btnClick()"  value="提交"/>  
    58.     </div>  
    59.     </form>  
    60. </body>  
    61. </html>  
     

    WebForm1.aspx 页面 (AJAX请求，写法二,一般情况下我们用这种)

    1. <head runat="server">  
    2.     <title></title>  
    3.     <script src="jquery-1.11.2.js" type="text/javascript"></script>  
    4.     <script type="text/javascript">  
    5.         function btnClick() {  
    6.             $.ajax({  
    7.                 url: "WebForm1.aspx",  
    8.                 type: "Post",  
    9.                 dataType: "Text",  //请求到服务器返回的数据类型  
    10.                 data: { "id": "2" },  
    11.   
    12.                 success: function (data) {  
    13.   
    14.                     var obj = $.parseJSON(data); //这个数据  
    15.   
    16.                     var name = obj.Json[0].UserName;  
    17.                     var age = obj.Json[0].Age;  
    18.   
    19.                     document.getElementById("name").innerHTML = name;  
    20.                     document.getElementById("age").innerHTML = age;  
    21.                 }  
    22.   
    23.             })  
    24.         }  
    25.     </script>  
    26. </head>  
    27. <body>  
    28.     <form id="form1" runat="server">  
    29.     <div>  
    30.         <table id="t1"border="1px">  
    31.             <tr><td>姓名</td><td>年龄</td></tr>  
    32.             <tr><td id="name"></td><td id="age"></td></tr>  
    33.         </table>  
    34.          <input type="button" onclick="btnClick()"  value="提交"/>  
    35.     </div>  
    36.     </form>  
    37. </body>  
    38. </html>  
     



    WebForm1.aspx.cs

    [csharp] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.UI;  
    6. using System.Web.UI.WebControls;  
    7. using System.Data.SqlClient;  
    8. using System.Data;  
    9.   
    10. namespace IsPostBack  
    11. {  
    12.     public partial class WebForm1 : System.Web.UI.Page  
    13.     {  
    14.         protected void Page_Load(object sender, EventArgs e)  
    15.         {  
    16.             string id = Request["id"]; //如果不是通过ajax 请求提交数据 就不会取到这个id ，所以此时的id 为null。但是如果是通过ajax请求提交数据，因为提交数据中有提交id，所以就能够取到这个id ，此时的id就有值了。  
    17.   
    18.             if (!string.IsNullOrEmpty(id)) // 如果不是通过ajax 请求提交数据 就不会进入花括号来调用GetUserData(string id) 方法  
    19.             {  
    20.   
    21.                 GetUserData(id); //如果是通过ajax请求提交数据，就会进入花括号来调用GetUserData(string id) 方法  
    22.             }  
    23.               
    24.         }  
    25.   
    26.         void GetUserData(string id)  
    27.         {  
    28.             DataTable dt= SqlHelper.ExecuteDataTable("select * from T_User where id=@id", new SqlParameter("id", id));  
    29.             string data= DataTableConvertJson.DataTableToJson("Json", dt);  
    30.   
    31.             Response.Write(data);  
    32.             Response.End(); //将当前所有缓冲的输出发送到客户端，停止该页的执行，如果没有这一步的话，程序还会往后执行，除了把data输出到客户端之外，还会将webForm1.aspx里面的html代码都输出到页面。  
    33.   
    34.                         
    35.   
    36.         }  
    37.     }  
    38. }  
  • 相关阅读:
    mysql初识（五） 统计与计算与时间
    mysql初识（四）添加/修改字段信息
    mysql初识（二） 基础的查询语句
    mysql初识（三）修改表结构
    mysql初识（一）基础属性篇
    在Ubuntu上安装Docker Engine
    使用PowerDesigner对NAME和COMMENT互相转换
    mysql 5.1.34
    debian7下安装eclipse
    让 Visio 2003/2007 同时开多个独立窗口
  • 原文地址：https://www.cnblogs.com/momjs/p/5732958.html
Copyright © 2011-2022 走看看