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调用后台方法同样很简单,为了便于自己以后查看,特将此 ...
随机推荐
- satellite-menu和ArcMenu
github上的开源库其实还是很不错的,之前的时候总感觉学一些开源库比较麻烦,里边有好多方法什么的,今天终于迈出了第一步,中间也遇到了一些问题,现在总结下,也给其他刚开始学习开源库的小伙伴一些指导: ...
- C#(VS2008)服务编写-安装和部署
1.创建一个空白解决方案. 2.在解决方案下面添加两个Windows服务:WXSmsGuardNew(保护服务),WXSmsMainNew(主服务). 3.第一个服务作为保护服务,服务上添加两个控件: ...
- Linux下配置VNC
1.确认是否安装vnc服务端 : rpm -q tigervnc-server 默认是没有安装的,需要在Linux系统文件Packages文件夹找到vnc安装包(里面有两个分别是客户端与服务端)tig ...
- td太多内容显示...
table style="table-layout:fixed;"td style="text-overflow: ellipsis;white-space: nowra ...
- linux arp攻击解决方法 测试很有效
公司有台centos服务器中了arp攻击,严重影响业务,测试了很多方法都没解决,机房技术也没法处理. 通过下面方法,可以有效抵挡arp攻击. 1.环境 centos6.4 2.执行 arpin ...
- DataTables warning 错误警告
今天使用 Charisma 框架的 jquery datatable 插件时出现如下错误: 搜索才发现 DataTables 目前不支持有单元格合并的表格.而且只要单元格数目不同就会有错误,不能使用搜 ...
- umdh工具使用
先安装工具,http://msdn.microsoft.com/en-us/windows/hardware/gg463009.aspx 选择其中的http://msdn.microsoft.com/ ...
- mysl lock table read
<pre name="code" class="html">Session 1: mysql> use zjzc; Reading table ...
- mysqldump --master-data
--master-data[=#] This causes the binary log position and filename to be appended to the output. If ...
- poj 3661 Running（区间dp）
Description The cows are trying to become better athletes, so Bessie ≤ N ≤ ,) minutes. During each m ...