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调用后台方法同样很简单,为了便于自己以后查看,特将此 ...
随机推荐
- ASP.NET中怎样才能使自己的代码运行的效率更高
一.网页设计相关: 1,做好页面布局和内容规划,只放置合适的内容,并尽可能使页面设计的最小. 2,使用好的网页编辑器,如DW,FP,不要用VS自带的编辑器,因为它会产生很多无用的沉余代码,而且设计的界 ...
- Hadoop学习笔记——入门指令操作
假设Hadoop的安装目录HADOOP_HOME为/home/admin/hadoop. 启动与关闭启动HADOOP1. 进入HADOOP_HOME目录. 2. 执行sh bin/start-all. ...
- Mysql源码安装
首先去http://dev.mysql.com/downloads/mysql/5.6.html 下载mysql的源代码,记住是source code,别下别的版本 1.安装依赖的包 yum -y i ...
- C语言单片和C#语言服务器端DES及3DES加密的实现
原文:C语言单片和C#语言服务器端DES及3DES加密的实现 公司最近在做单片机和C#语言的通信.用的是Socket通信.传输的数据是明文,后来 在会上讨论准备用DES加密(对称加密)来做. 双方约定 ...
- 推荐一些C#相关的网站、资源和书籍(转载)
原文地址:http://blog.csdn.net/chinacsharper/article/details/17514923 一.网站 1.http://msdn.microsoft.com/zh ...
- Android UI SurfaceView的使用-绘制单个图型或多个图形
新建MyView类继承自SurfaceView: public class MyView extends SurfaceView implements SurfaceHolder.Callback { ...
- SQL Server 获取服务器信息
最近做了一个小工具,里面涉及到一些取SQL Server 服务器信息的一些东西,找了好久,找到一个不错的,贴出来分享. 系统函数 SERVERPROPERTY ( propertyname ) 包含要 ...
- XCode 7上传遇到ERROR ITMS-90535 Unexpected CFBundleExecutable Key. 的解决办法（转）
原文:http://blog.csdn.net/wxs0124/article/details/48706685 找到腾讯的info.plist 删除箭头指向的一行 重新打包,上传. (注明,不一定是 ...
- UCS2转UTF-8方法
前两天工作时需要将UCS2编码转为UTF-8编码在网页显示.网上找了好久没有好方法,后来还是同事给了一个自己的函数,顺利解决问题.把函数贴在这里,愿帮助遇到同样问题的工友们~ /** * U ...
- win下vm10+mac os 10.9安装遇到问题
在windows 8下安装vm10.0.0+mac os 10.9遇到问题记录例如以下: 一.因为之前我装的vm9+mac os 10.7: 二.准备安装mac os 10.9,把vm9换成vm10: ...