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

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

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

<!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-1.11.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        function btnClick() {

            var xmlhttp = new XMLHttpRequest();

            if (!xmlhttp) {

                alert("创建xmlhttp对象异常");

                return false;

            }  

            xmlhttp.open("POST", "WebForm1.aspx", true);

            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  

            xmlhttp.onreadystatechange = function () {  

                if (xmlhttp.readyState == ) {  

                    if (xmlhttp.status == ) {  

                        var str = xmlhttp.responseText; // 通过alert(str)得知 str={"Json":[{"Id":"1","UserName":"张三","Age":"25","Gender":"0"}]}

                        //debugger;

                        var obj = $.parseJSON(str); //将str这个字符串转换成Json对象     

                        var name = obj.Json[].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来获得 "张三" 这个值    

                        var age = obj.Json[].Age;  

                        document.getElementById("name").innerHTML = name;

                        document.getElementById("age").innerHTML = age;  

                    }

                    else {

                        alert("ajax服务器错误");

                    }

                }  

            }

            xmlhttp.send("id=1");  

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table id="t1"border="1px">

            <tr><td>姓名</td><td>年龄</td></tr>

            <tr><td id="name"></td><td id="age"></td></tr>

        </table>

         <input type="button" onclick="btnClick()"  value="提交"/>

    </div>

    </form>

</body>

</html>

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

<head runat="server">

    <title></title>

    <script src="jquery-1.11.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        function btnClick() {

            $.ajax({

                url: "WebForm1.aspx",

                type: "Post",

                dataType: "Text",  //请求到服务器返回的数据类型

                data: { "id": "" },  

                success: function (data) {  

                    var obj = $.parseJSON(data); //这个数据  

                    var name = obj.Json[].UserName;

                    var age = obj.Json[].Age;  

                    document.getElementById("name").innerHTML = name;

                    document.getElementById("age").innerHTML = age;

                }  

            })

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table id="t1"border="1px">

            <tr><td>姓名</td><td>年龄</td></tr>

            <tr><td id="name"></td><td id="age"></td></tr>

        </table>

         <input type="button" onclick="btnClick()"  value="提交"/>

    </div>

    </form>

</body>

</html>

WebForm1.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;  

namespace IsPostBack

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            string id = Request["id"]; //如果不是通过ajax 请求提交数据 就不会取到这个id ，所以此时的id 为null。但是如果是通过ajax请求提交数据，因为提交数据中有提交id，所以就能够取到这个id ，此时的id就有值了。  

            if (!string.IsNullOrEmpty(id)) // 如果不是通过ajax 请求提交数据 就不会进入花括号来调用GetUserData(string id) 方法

            {  

                GetUserData(id); //如果是通过ajax请求提交数据，就会进入花括号来调用GetUserData(string id) 方法

            }  

        }  

        void GetUserData(string id)

        {

            DataTable dt= SqlHelper.ExecuteDataTable("select * from T_User where id=@id", new SqlParameter("id", id));

            string data= DataTableConvertJson.DataTableToJson("Json", dt);  

            Response.Write(data);

            Response.End(); //将当前所有缓冲的输出发送到客户端，停止该页的执行，如果没有这一步的话，程序还会往后执行，除了把data输出到客户端之外，还会将webForm1.aspx里面的html代码都输出到页面。  

        }

    }

}

WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法，获取数据(转)的更多相关文章

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

    WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据 WebForm1.aspx 页面 (原生AJAX请求,写法一) <%@ Page Langu ...

  2. 转：jquery向普通aspx页面发送ajax请求

    本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的ScriptManager. $.ajax向普通页面发送 ...

  3. 【spring 后台跳转前台】使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中

    问题: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示:  问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...

  4. 【springMVC 后台跳转前台】1.使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中 ----2.前后台都没有报错，不能进入ajax回调函数

    问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示:  问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方 ...

  5. 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例

    部署环境:Window 7 SP1+IIS7 成功方案: 其成功解决问题的几个重要因素如下: 1.       由于WebService默认不支持Get请求,所以要在Web.config配置文件内的& ...

  6. 获取class对象的三种方法以及通过Class对象获取某个类中变量,方法,访问成员

    public class ReflexAndClass { public static void main(String[] args) throws Exception { /** * 获取Clas ...

  7. aspx页面使用ajax遇到try catch中使用Response.End()报错

    1.使用Ajax接收数据,在返回Response.Write()后应该调用Response.End()才能将数据写入到调用的页面,才能被jQuery的回调函数获取到返回的JSON数据 2.在try-- ...

  8. aspx页面前端使用js 调用aspx.cs后台的方法,不回传

    本次使用 Ajax.dll,AjaxPro.dll 两个类库 1.首先添加引用:Ajax.dll,AjaxPro.dll 文件在 Libiary 目录下 2.配置 WebConfig 属性 将 下面2 ...

  9. Python 中的登陆获取数据跳转页面(不含数据库)

    简单表单和模板: import os.path import tornado.httpserver import tornado.ioloop import tornado.options impor ...

随机推荐

  1. 灵玖Nlpir Parser智能挖掘汉语精准分词

    在中文自然语言处理中,词是最小的能够独立活动的有意义的语言成分.汉语是以字为基本书写单位,词语之间没有明显的区分标记,因此进行中文自然语言处理通常是先将汉语文本中的字符串切分成合理的词语序列,然后再在 ...

  2. Typescript 解构 、展开

    什么是解构.展开? 展开与解构作用相反,简单来说: 解构:解构赋值允许你使用数组或对象字面量的语法,将数组和对象的属性付给各种变量. 展开:允许你讲一个数组展开为另一个数组,或一个对象展开为另一个对象 ...

  3. CSS2--字体样式

    ## CSS2 字体样式 ##### font-family 字体族 - 规定元素的字体系列 - 把多个字体作为一个"回退"系统保存.保证浏览器的支持 - ````Microsof ...

  4. Linux 粘着位（sticky bit）

    当设置粘着位时只有root或者owner才能删除.重命名文件. 示例: 用户apple默认组为fruit. [root@titan ~]# id apple uid=1001(apple) gid=1 ...

  5. NYOJ-63 小猴子下落（二叉树及优化算法详解）

      小猴子下落 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 有一颗二叉树,最大深度为D,且所有叶子的深度都相同.所有结点从左到右从上到下的编号为1,2,3,··· ...

  6. [算法题] Search in Rotated Sorted Array

    题目内容 本题来源LeetCode Suppose an array sorted in ascending order is rotated at some pivot unknown to you ...

  7. 17个新手常见Python运行时错误

    当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...

  8. phoenix常用命令

    1.登录命令 ./sqlline.py localhost:2181:/hbase-unsecure span { font-family: "Courier New"; font ...

  9. HTML5 web存储

    既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...

  10. css3中空格和>的区别

    A>B 表示选择A元素的所有子B元素. 与A B的区别在于,A B选择所有后代元素,而A>B只选择一代. A+B表示HTML中紧随A的B元素(A与B是同级元素).