AJAX JQuery 调用后台方法返回值（不刷新页面）
AJAX JQuery 调用后台方法返回值（不刷新页面）
（1）无参数返回值（本人亲试返回结果不是预期结果）
javascript方法：
$(function () {
//无参数返回值
$("#btn_Ajax1").click(function () {
$.ajax({
type: "Post",
//方法所在页面和方法名
url:
"Ajax_Test.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;
});
后台方法：
//[System.Web.Services.WebMethod()]
//不带参数
[WebMethod()]
public static string getValueByAjaxNoParms()
{
string ddd = "返回 GAGAHJT";
return ddd.ToString();
}
（2）带参数返回值
javascript方法：
//带参数
$("#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;
});
后台方法：
//带参数
[WebMethod]
public static string getValueByAjaxByParms(string str, string str2,
string str3)
{
return str + str2 + str3;
}
（3）返回数组
javascript方法：
//返回数组
$("#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;
});
后台方法：
//返回数组
[WebMethod]
public static List<string>
getArrayByAjax()
{
List<string> li = new
List<string>();
for (int i = 0; i < 10; i++)
li.Add(i + "");
return li;
}
（4）返回hashtable
javascript方法：
//返回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;
});
后台方法：
//Hashtable
[WebMethod]
public static Hashtable geHashtableByAjax(string key, string
value)
{
Hashtable hs = new Hashtable();
hs.Add("www", "yahooooooo");
hs.Add(key, value);
return hs;
}
（5）返回DataTable
javascript方法：
//返回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;
});
后台方法：
//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();
}
（5）返回DataTable
javascript方法：
//返回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")
}
});
});
});
后台方法：
//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);
}
前台数据转换方法
//解析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;
}
后台数据转换方法
#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
AJAX JQuery 调用后台方法返回值（不刷新页面）的更多相关文章
- AJAX回调(调用后台方法返回数据)
记得先要导入jquery.js. 格式一 $.ajax({"Key1":"value1","key2":"value2" ...
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...
- jQuery调用后台方法
前台: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.as ...
- jQuery 调用后台方法（net）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- 调用js方法返回值为undefined
问题描述: 我写的js方法: function getname(code){ var name $.post("",{ code:code },function(resurlt){ ...
- Ajax前台调用后台方法、AJAX Pro2(回调函数)
//获取分店 function cityResult() { if (cityName != "") { $("#ddlcity_").find("o ...
- Ajax - 异步调用后台程序 -JSON
在ASP.NET使用ajax时基本上每个操作都要新建一个.ashx处理程序,页面很多,每个页面的操作也很多,这样的话项目就会产生新建很多很多的.ashx页面,能不能把方法写在后台中,然后Jquery直 ...
- Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...
- asp.net如何在前台利用jquery Ajax调用后台方法
一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此 ...
随机推荐
- Oracle Dataguard三种保护模式概述(转)
Oracle的DataGuard技术有三种实现模式,分别是max performance.max availability.max protection这三种模式. 以下是来自Oracle文档的摘要信 ...
- discuz二次开发笔记（一）------$_G全解析
$_G 保存了 Discuz! 中所有的预处理数据缓存能够很好的提高程序的性能,一些配置数据没必要每次都查询数据库,只要在修改了的时候更新下缓存即可.Discuz! 中所有的缓存保存在 $_G[cac ...
- mklink修改Chrome缓存目录
管理员命令打开CMDmklink /D "C:\Users\Administrator\AppData\Local\Google\Chrome\User Data" "C ...
- c#访问各数据库的providerName各驱动
在machine.config(C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/CONFIG)文件中有这么一段: <system.data> & ...
- php cli模式没有加载php.ini
这两天在虚拟机的linux里编译安装了php,同时也把swoole的扩展也编译上了.在/etc/php.ini里加上了extension=swoole.so,但是用php -m 查看加载的模块并没有s ...
- 论山寨手机与Android联姻 【10】SmartPhone的通信机制
上一章我们说到,智能手机 == 电脑 + 移动网卡,这个提法比较粗略,更精准的提法应当是,智能手机的硬件结构分为应用程序处理器AP,和基带处理器BP两个部分.虽然AP部分的功能与电脑主板基本类似,但是 ...
- Hot-Bar 軟板設計注意事項
Hot-Bar reflow (熔錫熱壓焊接),其最只要功能,就是利用熱壓頭熔融已經印刷於電子印刷電路(PCB)上的錫膏,藉以連接兩個各自獨立的電子零件,最常見到的是將軟排線(FPB)焊接於電子印刷電 ...
- Delphi2007下CIS的clHttp使用
Delphi组件Clever Suite Internet是一款优秀的网络组件,唯一让我感觉不足的是ClHttp竟然使用了断言,当程序遇到问题的时候就会弹出一个对话框,并显示问题是出在了那个单元里.好 ...
- SMO要点总结
SMO要点总结: SMO使用坐标上升的方法,求解SVM的最优解.和原始坐标上升方法的不同点在于: 1. 由于SVM的限制条件 ,所以不能只使用一个坐标,改为更新两个 2. 采用 ...
- Wormholes(SPFA+Bellman)
Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 36860 Accepted: 13505 Descr ...