直接上图=============最后拷贝源码(图片清楚)

=========================================================================================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Test.aspx.cs" Inherits="Ajax_Test" %>
<!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>Jquery -Ajax 入门联系 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net</title>
    <script language="javascript" type="text/javascript" src="JQquery/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //无参数返回值
            //===============================================
            $("#btn_Ajax1").click(function () {
                $.ajax({
                    //要用post方式  
                    type: "Post",
                    //方法所在页面和方法名  
                    url: "Ajax_Test.aspx/getValueByAjaxNoParms",
                    //url: "Ajax_ResponseText.aspx/getValueByAjaxNoParms", //其他页面
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    beforeSend: function (XMLHttpRequest) {
                        $('#show').text("正在查询");
                    },
                    success: function (data) {
                        //返回的数据用data.d获取内容  
                        alert(data.d);
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
                //禁用按钮的提交  
                return false;
            });
            //===============================================
            //带参数
            $("#btn_Ajax2").click(function () {
                $.ajax({
                    type: "Post",
                    url: "Ajax_Test.aspx/getValueByAjaxByParms",
                    //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字  
                    data: "{'str':'我是','str2':'XXX','str3':'是不是？'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        //返回的数据用data.d获取内容  
                        alert(data.d);
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
                //禁用按钮的提交  
                return false;
            });
            //===============================================
            //返回数组
            $("#btn_Ajax3").click(function () {
                $.ajax({
                    type: "Post",
                    url: "Ajax_Test.aspx/getArrayByAjax",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        //插入前先清空ul  
                        $("#show").html("");

//递归获取数据  
                        $(data.d).each(function () {
                            //插入结果到li里面  
                            $("#show").append("<li>" + this + "</li>");
                        });

alert(data.d);
                    },
                    error: function (err) {
                        alert(err);
                    }
                });

//禁用按钮的提交  
                return false;
            });
            //===============================================
            //返回hashtable
            $("#btn_Ajax4").click(function () {
                $.ajax({
                    type: "Post",
                    url: "Ajax_Test.aspx/geHashtableByAjax",
                    //记得加双引号  T_T  
                    data: "{ 'key': 'haha', 'value': '哈哈！' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        //debugger;
                        alert("key: haha ==> " + data.d["haha"] + "\n key: www ==> " + data.d["www"]);
                    },
                    error: function (err) {
                        alert(err + "err");
                    }
                });
                //禁用按钮的提交  
                return false;
            });
            //===============================================
            //返回DataTable（json）1
            $("#btn_Ajax5").click(function () {
                $.ajax({
                    type: "Post",
                    url: "Ajax_Test.aspx/geDataTableByAjax1",
                    data: "{'str':'我是','str2':'XXX','str3':'是不是？'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                    debugger;
                    //你可以 alert(data.d)看数据返回的格式
                    data = jQuery.parseJSON(data.d); //  JSON再次转换为Table 形式； 
                    //可以是用  data[Row][Column].toString()来读取值；Row：第几行 Column：数据字段
                    //alert(data[0]["ID"].toString() + ";"+data[0]["Name"].toString() + ";"+data[0]["Address"].toString());
                    t = "<table border='1'>";
                    $.each(data, function (i, item) {
                        t += "<tr>";
                        t += "<td>" + item.ID + "</td>";
                        t += "<td>" + item.Name + "</td>";
                        t += "<td>" + item.Address + "</td>";
                        t += "</tr>";
                    })
                    t += "</table>";
                    $("#show").html(t);
                    //$('#Div1').html(BuildDetails(data));
                },
                error: function (err) {
                    alert(err + "err");
                }
                });

//禁用按钮的提交  
                return false;
            });
            //===============================================
            //返回DataTable（json）2
            $("#btn_Ajax6").click(function () {
                $.ajax(
                { type: "post",
                    url: "Ajax_Test.aspx/geDataTableByAjax2",
                    //data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",

success: function (data) {
                        debugger;
                        var mydts = data.d.mytablename;    //这里也可以接受类似 DataSet 的对象；
                        $('#Div1').html(BuildDetails(mydts));
                        $('#Div2').html(BuildTable(mydts));
                    },
                    failure: function () {
                        alert("error")
                    }
                });
            });

//=================================================
        });

//解析DataTable(非真正的Table)
        function BuildDetails(dataTable) {
            var content = [];
            for (var row in dataTable) {
                for (var column in dataTable[row]) {
                    content.push("<tr>"); 
                    content.push("<td><b>");
                    content.push(column);content.push("</td></b>");   content.push("<td>") ;
                     content.push(dataTable[row][column]);
                    content.push("</td>");content.push("</tr>");
                }
            }
            var top = "<table border='1' class='dvhead'>";
            var bottom = "</table>";
            return top + content.join("") + bottom;
        }
        function BuildTable(dataTable) {
            var headers = [];
            var rows = [];
            //column 
            headers.push("<tr>");
            for (var column in dataTable[0])
                headers.push("<td><b>" + column + "</b></td>");
            headers.push("</tr>");
            //row  
            for (var row in dataTable) {
                rows.push("<tr>");
                for (var column in dataTable[row]) {
                    rows.push("<td>");
                    rows.push(dataTable[row][column]);
                    rows.push("</td>");
                }
                rows.push("</tr>");
            }
            var top = "<table border='1' class='gvhead'>";
            var bottom = "</table>"; return top + headers.join("") + rows.join("") + bottom;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input value="无参数" type="button" id="btn_Ajax1" />
        <input value="带参数" type="button" id="btn_Ajax2" />
        <input value="返回数组" type="button" id="btn_Ajax3" />
        <input value="返回Hashtable" type="button" id="btn_Ajax4" />
        <input value="返回DataTable(返回Json)" type="button" id="btn_Ajax5" />
        <input value="返回DataTable(返回类似Table)" type="button" id="btn_Ajax6" />
        <div id="show">
        </div>
        <div id="Div1">
        </div>
        <div id="Div2">
        </div>
    </div>
    </form>
</body>
</html>

*******************************************************************************************************************************************

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;        //命名空间
using System.Web.Services;//命名空间
using System.Collections;//命名空间
using System.Web.Script.Serialization;//命名空间

public partial class Ajax_Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

}
    //[System.Web.Services.WebMethod()]
    //不带参数
    [WebMethod()]
    public static string getValueByAjaxNoParms()
    {
        string ddd = "返回 GAGAHJT";
        return ddd.ToString();
    }
    //带参数
    [WebMethod]
    public static string getValueByAjaxByParms(string str, string str2, string str3)
    {
        return str + str2 + str3;
    }
    //返回数组
    [WebMethod]
    public static List<string> getArrayByAjax()
    {
        List<string> li = new List<string>();

for (int i = 0; i < 10; i++)
            li.Add(i + "");

return li;
    }
    //Hashtable
    [WebMethod]
    public static Hashtable geHashtableByAjax(string key, string value)
    {
        Hashtable hs = new Hashtable();

hs.Add("www", "yahooooooo");
        hs.Add(key, value);

return hs;
    }
    //Json
    //在前台通过jQuery.parseJSON(data.d); 转换为类似Table
    [WebMethod]
    public static string geDataTableByAjax1(string str, string str2, string str3)
    {

DataTable dt = new DataTable();
        dt.TableName = "表名";
        dt.Columns.Add("ID", typeof(Int32));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Address", typeof(string));
        for (int i = 0; i < 5; i++)
        {
            DataRow dr = dt.NewRow();
            dr["ID"] = i.ToString();
            dr["Name"] = "JSON" + i.ToString();
            dr["Address"] = "中国-北京-海淀" + i.ToString() + "号";
            dt.Rows.Add(dr);
        }
        string strss=Dtb2Json(dt).ToString();
      
        return strss.ToString();

}
    //json
    [WebMethod]
    public static Dictionary<string, object> geDataTableByAjax2()
    {
        DataTable dt = new DataTable();
        dt.TableName = "mytablename";
        dt.Columns.Add("ID", typeof(Int32));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Address", typeof(string));
        for (int i = 0; i < 5; i++)
        {
            DataRow dr = dt.NewRow();
            dr["ID"] = i.ToString();
            dr["Name"] = "JSON" + i.ToString();
            dr["Address"] = "中国-北京-海淀" + i.ToString() + "号";
            dt.Rows.Add(dr);
        }
        return DatToJson(dt);
    }

#region DataTable转Json
    public static string Dtb2Json(DataTable dtb)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();
        ArrayList dic = new ArrayList();
        foreach (DataRow row in dtb.Rows)
        {
            Dictionary<string, object> drow = new Dictionary<string, object>();
            foreach (DataColumn col in dtb.Columns)
            {
                drow.Add(col.ColumnName, row[col.ColumnName]);
            }
            dic.Add(drow);
        }
        return jss.Serialize(dic);
    }
    #endregion

#region Json转DataTable
    public static DataTable Json2Dtb(string json)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();
        ArrayList dic = jss.Deserialize<ArrayList>(json);
        DataTable dtb = new DataTable();
        if (dic.Count > 0)
        {
            foreach (Dictionary<string, object> drow in dic)
            {
                if (dtb.Columns.Count == 0)
                {
                    foreach (string key in drow.Keys)
                    {
                        dtb.Columns.Add(key, drow[key].GetType());
                    }
                }
                DataRow row = dtb.NewRow();
                foreach (string key in drow.Keys)
                {
                    row[key] = drow[key];
                }
                dtb.Rows.Add(row);
            }
        }
        return dtb;
    }
    #endregion

#region DataTable转Json(非Json)
    //类似 前台jQuery.parseJSON（dt）函数
    private static Dictionary<string, object> DatToJson(DataTable table)
    {
        Dictionary<string, object> d = new Dictionary<string, object>();
        d.Add(table.TableName, RowsToDictionary(table));
        return d;
    }
    private static List<Dictionary<string, object>> RowsToDictionary(DataTable table)
    {
        List<Dictionary<string, object>> objs = new List<Dictionary<string, object>>();
        foreach (DataRow dr in table.Rows)
        {
            Dictionary<string, object> drow = new Dictionary<string, object>();
            for (int i = 0; i < table.Columns.Count; i++)
            {
                drow.Add(table.Columns[i].ColumnName, dr[i]);
            }
            objs.Add(drow);
        }
        return objs;
    }
    #endregion

}

【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net相关推荐

  1. Ajax入门总结--jquery实现Ajax

    ajax(Asynchronous Javascript And XML):只刷新局部页面的技术 ajax的工作流程: 使用javascript获取到页面上的数据 通过Ajax引擎创建XMLHttpR ...

  2. 【SpringMVC笔记】Ajax 入门（jQuery.ajax）

    Ajax Ajax 简介 伪造 Ajax(iframe标签) jQuery.ajax 使用 jQuery.ajax 案例 Ajax 执行流程 Ajax 异步加载数据案例 Ajax 验证用户名密码 获取 ...

  3. ajax调用后台java方法,jquery ajax再次封装，前台调用后台java方法直接返回数据

    一,前台js部分代码 /** * bean参数格式:类全限定名.方法名  opt参数格式:键值对  handleResponse:会function类型参数包含一个参数data,为后台返回json数据 ...

  4. extjs 前端js代码调用后台函数方法

    前端javascript代码部分: Ext.Ajax.request( { url: '/Process/SuspendWorkFlow',   //配置的后台函数路由 params: { wfIns ...

  5. ajax函数返回值,ajax：怎么获得onreadystatechange调用的函数的返回值？

    异步的ajax实际上使用了单独的进程,因此无法获取到这个返回值,而且,在调用ajax()方法时你根本无法知道它什么时候会执行完毕. 因此对于异步的ajax来说,你无法主动的获取其返回值,只能提供回调方 ...

  6. ajax入门实例代码,AJAX、AJAX实例及AJAX源代码

    AJAX.AJAX实例及AJAX源代码 作者:佚名 来源:CNZZ 2008-1-4 AJAX介绍 AJAX 关键词: JavaScript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WE ...

  7. Asp.net 中 Eval 调用后台函数的写法

    <%# GetXXX(Eval("ColumnName").ToString())%> 转载于:https://www.cnblogs.com/Ken-Cai/arch ...

  8. jQuery中的$.getJSON、$.ajax、$.get、$.post的区别

    jQuery中的$.getJSON.$.ajax.$.get.$.post的区别 使用见Flask(python)异步(ajax)返回json格式数据 ①.$.getJSON $.getJSON()是 ...

  9. JQuery EasyUI入门

    JQuery EasyUI入门 @(JavaScript)[jQuery, EasyUI, 入门] JQuery EasyUI入门 基本概述 案例 Layout布局 Accordion手风琴 Tab选 ...

最新文章

  1. Codeforces 903E Swapping Characters
  2. 新算法可模拟人脑整体神经电路
  3. php与java安全之争
  4. python旋转矩阵_python – 来自两个3D点的Euler角度和旋转矩阵
  5. Python 之 函数基础
  6. pytorch中的Sequential使用方法
  7. 持久化消息队列memcacheq的安装配置
  8. window 平台下mysql主从的监控(window执行计划配合vb脚本)
  9. 在app上查看开发代码
  10. IDEA集成SVN代码管理常用功能
  11. 谷歌pagerank算法（谷歌搜索引擎的pagerank算法的原理）
  12. 一秒等于多少毫秒_新知｜一秒有多长？你以为的“一瞬间”有多快？
  13. Cpp多重继承会产生的问题
  14. 如何开通电子邮箱的SMTP功能
  15. 基于51单片机的扫地小车，扫地机器人设计。 有原理图，程序代码，原文
  16. vgs、vgdisplay、vgscan 查看卷组
  17. DCloud与APICloud的对比选择
  18. LED显示屏技术基本知识
  19. 【ArcGIS微课1000例】0055：根据图层创建自定义图例符号案例教程
  20. 基于FME实现的地理数据库批量建库的解决方案，支持gdb、mdb、shapefile等数据格式，gdb批量建库，mdb批量建库，shp批量建库，shapefile批量建库，地理数据批量建库

热门文章

  1. python pptx 从中间加几页_python-pptx---插入表格
  2. 英飞凌AI越野组入门教程
  3. BP网络Python实现代码
  4. 利用二极管的P-N结的I-V特性测量Boltzmann常数
  5. IDEA插件-生成对象所有set方法---＞GenerateAllSetter
  6. oracle mysql 适配器_Oracle协议适配器错误解决办法
  7. 镜头上的四线电机怎么驱动_2相四线，四相五线，四相六线步进电机接线及驱动方法...
  8. npc寻路问题 c++_《原神》游戏中最懒的NPC出现了，她要玩家找一朵甜甜花
  9. html div全屏遮罩层,Jquery全屏遮罩层DIV的实现代码
  10. html页面关闭前提示信息,【转】表单提交及关闭当前页面并刷新数据