extjs ajax方式前后台数据传送(json格式) -
- ITeye技术网站
本人也是学习extjs中摸索,有不对的地方,请指正.
extjs用ajax传送数据的方法有post(用普通的表单或用json格式),get(用params).
在回传的时候用json(推荐方法) ,需要注意的是服务器必须要返回json格式,并且必须要设置success的值,当然你不这样也能,但是这种方式应该是官方提倡的方式.
这里主要总结json数据服务器回传的方法.
在api总指出回传的格式{true,data:{clientName: "Fred. Olsen Lines",
portOfLoading:"FXT",portOfDischarge: "OSL" }
需要注意的是这里的success和data是关键字,(姑且这么叫吧)在data中是数据在客户端通过
Ext.decode(response.responseText).clientName获得.第一个回传数据.这里证明在用
success: function(response){}函数的时候,参数response是一个json字符串,通过Ext.decode解析了data的数据集.
//成功时回叫,第一个参数为XMLHttpRequest对象,第二个参数传入指定的options
所有,这里前后台的代码应该这样统一:
后台(asp):
response.write "{success:false,data:{msg:'密码或用户名不能为空!'}}"
response.write "{success:true,data:{msg:'登陆成功!'}}"
success: function(response,options){Ext.MessageBox.alert(' 提示',Ext.decode(response.responseText).msg);}, failure: function(response,options){Ext.MessageBox.alert('提示','Ext.decode(response.responseText).msg);},
Ext.util.JSON.decode(response.responseText); 这个也是对json编码的解析.
另外在网上还看到这样代码:
{ success:false, errors:{errstr: '用户名或者密码错误'} }
查询详细的信息。　　success Function 指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。　　failure Function 指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。　　scope Object 指定回调函数的作用域，默认为浏览器window。　　form Object/String 指定要提交的表单id或表单数据对象。　　isUpload Boolean 指定要提交的表单是否是文件上传表单，默认情况下会自动检查。　　headers Object 指定请求的Header信息。　　xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。　　jsonData Object/String 指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。　　disableCaching Boolean 是否禁止cache。
浏览 33504
浏览: 118044 次
来自: 北京
大写的不负责！~~~~~~~~~~~~~~~~~~~~
FF15 B8170065
我有新的的注册码和激活码关于ajax后台success传来json数据的问题 - Fire_Dragon - 博客园
最近在使用JQuery的ajax方法时，需要返回的数据为json数据，在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据。在$.ajax方法中应该是如何来处理的，简单进行说明。
& & & & &首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]
& & & & 1,使用普通的aspx页面来处理
& & & & & & & & & & & & &&
$.ajax({&&&
&&&&&&&type:&"post",&&&
&&&&&&&url:&"Default.aspx",&&&
&&&&&&&dataType:&"json",&&&
&&&&&&&success:&function&(data)&{&&&
&&&&&&&&&&&&&&&&&&&&&&&&$("input#showTime").val(data[0].demoData);&&&
&&&&&&&&&&&&&&&&&&},&&&
&&&&&&&error:&function&(XMLHttpRequest,&textStatus,&errorThrown)&{&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&alert(errorThrown);&&&
&&&&&&&&&&&&&&&}&&&
& & & & &这里是后台传递数据的代码
Java代码 &
Response.Clear();&&&
Response.Write("[{\"demoData\":\"This&Is&The&JSON&Data\"}]");&&&
Response.Flush();&&&
Response.End();&&
& & & & &这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据
& & & & & 2,使用webservice(asmx)来处理
这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，如下代码
$.ajax({&&&&&&&
&&&&&&type:&"post",&&&&&&&
&&&&&&url:&"JqueryCSMethodForm.asmx/GetDemoData",&&&&&&&
&&&&&&dataType:&"json",
&&&&&&contentType:&"application/&charset=utf-8",&&&&&&&
&&&&&&success:&function&(data)&{&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&$("input#showTime").val(eval('('&+&data.d&+&')')[0].demoData);&&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&},&&&&&&&
&&&&&&error:&function&(XMLHttpRequest,&textStatus,&errorThrown)&{&&&&&&&
&&&&&&&&&&&&&&&&&&&alert(errorThrown);&&&&&&&
&&&&&&&&&&&&&&}&&&&&&&
& & & & &下面这里为asmx的方法代码
Java代码 &
public&static&string&GetDemoData()&{&&&&&&&
&&&&&&&&&return&"[{\"demoData\":\"This&Is&The&JSON&Data\"}]";&&&&&&&
& & & & &这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据。
& & & & & 即
Java代码 &
success:function(data){&&
&&&&&&&&&&&&&&&eval(data);&&
&&&&&&&&&&&}&&$.ajax传JSON数据到后台的注意事项小结
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了$.ajax传JSON数据到后台的注意事项,需要的朋友可以参考下
代码如下: $.ajax({ url: "../Services.ashx", type: "POST", //data: { 'data': { 'typename': JSON.stringify(typename) }, 'operationType': '2' }, data: { 'data': typename, 'operationType': '2','nowheight':nowheight,'nowarea':nowarea }, success: function (msg) {} })
js代码如上，当data中的‘键'-‘值'对中的值为null（undefined）的时候，在发送请求的时候，那个值为null的键值对是不会传到后台的， 1、通过F12可以看到值为null的键值对确实没有传。 2、在后台使用context.Request.Form["名称"]的时候，发现这个值是null，如果对它进行获取，也会报错的。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具如何使用json在前后台进行数据传输实例介绍
字体：[ ] 类型：转载 时间：
需要把这些输入写入数据库，这里就用到json传入，先看一下后台如何生成要传输的数据，感兴趣的朋友可以参考下，希望可以帮助到你
上一篇博客写到用，可以让数据的输入不受显示，现在我们需要把这些输入写入数据库，这里就用到json传入。 首先，我们来写一下后台如何生成要传输的数据 [html]
代码如下: function generateDtb() { //写入 var txtName = document.getElementById("txtName"). //创建数组 var dtb = new Array(); //通过循环把数据写入到数组并返回 for (var i = 0; i & firstGroup. i++) { var row = new Object(); row.Name = txtN row.fullMoney = firstGroup[i]. row.discount = secondGroup[i]. dtb.push(row); }
} function generateDtb() { //写入 var txtName = document.getElementById("txtName"). //创建数组 var dtb = new Array(); //通过循环把数据写入到数组并返回 for (var i = 0; i & firstGroup. i++) { var row = new Object(); row.Name = txtN row.fullMoney = firstGroup[i]. row.discount = secondGroup[i]. dtb.push(row); }
把数组转换成json串传入到后台： [html]
代码如下: $(function () { //点击botton1 $("#lbtnOK").click(function () { var url = "DiscountManger.aspx?ajax=1"; var dtb = generateDtb(); // var strName = document.getElementById("txtName"). if (dtb == null) { } else { //序列化对象 var postdata = JSON.stringify(dtb); //异步请求 $.post(url, { json: postdata }, function (json) { if (json) { jBox.tip("添加成功！", "提示"); location.reload(); } else { jBox.tip("添加失败！", "提示"); location.reload(); } }, "json") } }); }); $(function () { //点击botton1 $("#lbtnOK").click(function () { var url = "DiscountManger.aspx?ajax=1"; var dtb = generateDtb(); // var strName = document.getElementById("txtName"). if (dtb == null) { } else { //序列化对象 var postdata = JSON.stringify(dtb); //异步请求 $.post(url, { json: postdata }, function (json) { if (json) { jBox.tip("添加成功！", "提示"); location.reload(); } else { jBox.tip("添加失败！", "提示"); location.reload(); } }, "json") } }); });
在后台的操作： 首先判断是否需要传输数据 [html]
代码如下: if (!IsPostBack) { //判断是否异步请求 if (Request.QueryString["ajax"] == "1") { ProcessRequest(); } if (!IsPostBack) { //判断是否异步请求 if (Request.QueryString["ajax"] == "1") { ProcessRequest(); }
在这里进行对数据的处理： [html]
代码如下: /// &summary& /// 处理异步请求 /// &/summary& private void ProcessRequest() { //存入要填写的策略 ArrayList arrDiscount = new ArrayList(); Response.ContentType = "text/html"; string json = Request.Form["json"]; //反序列化DataTable if (json == null) {
} else { DataTable newdtb = Json2Dtb(json); for (int i = 0; i & newdtb.Rows.C i++) { Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount(); //打折方案名 enStrategyDiscount.name = newdtb.Rows[i]["Name"].ToString(); //商店ID enStrategyDiscount.shopId = long.Parse(LoginInfo.ShopID); enStrategyDiscount.fullMoney = Convert.ToDecimal(newdtb.Rows[i]["fullMoney"].ToString()); enStrategyDiscount.discount = Convert.ToDecimal(newdtb.Rows[i]["discount"].ToString()); //写入数据到数组 arrDiscount.Add(enStrategyDiscount); } //写入数据到数据库 IStrategyBLL strategy = new StrategyBLL(); if (strategy.AddStrategyDiscount(arrDiscount)) { Response.Write("true"); Response.End(); } else { Response.Write("false"); Response.End(); } } /// &summary& /// 处理异步请求 /// &/summary& private void ProcessRequest() { //存入要填写的策略 ArrayList arrDiscount = new ArrayList(); Response.ContentType = "text/html"; string json = Request.Form["json"]; //反序列化DataTable if (json == null) {
} else { DataTable newdtb = Json2Dtb(json); for (int i = 0; i & newdtb.Rows.C i++) { Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount(); //打折方案名 enStrategyDiscount.name = newdtb.Rows[i]["Name"].ToString(); //商店ID enStrategyDiscount.shopId = long.Parse(LoginInfo.ShopID); enStrategyDiscount.fullMoney = Convert.ToDecimal(newdtb.Rows[i]["fullMoney"].ToString()); enStrategyDiscount.discount = Convert.ToDecimal(newdtb.Rows[i]["discount"].ToString()); //写入数据到数组 arrDiscount.Add(enStrategyDiscount); } //写入数据到数据库 IStrategyBLL strategy = new StrategyBLL(); if (strategy.AddStrategyDiscount(arrDiscount)) { Response.Write("true"); Response.End(); } else { Response.Write("false"); Response.End(); } }
这里，我们需要把json转换成datatable [html]
代码如下: /// &summary& /// Json转DataTable /// &/summary& /// &param name="json"&&/param& /// &returns&&/returns& private 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); } }
} /// &summary& /// Json转DataTable /// &/summary& /// &param name="json"&&/param& /// &returns&&/returns& private 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); } }
这样，就可以把数据无刷新的写入到数据库。 当然，如果我们有一个从数据库读取的datatable，如果通过json显示在前台呢。 首先，我们需要把datatable转换为json数据 [html]
代码如下: /// &summary& /// DataTable转Json /// &/summary& /// &param name="dtb"&&/param& /// &returns&&/returns& private 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); } /// &summary& /// DataTable转Json /// &/summary& /// &param name="dtb"&&/param& /// &returns&&/returns& private 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); }
然后写回到前台 [html]
代码如下: /// &summary& /// 处理异步请求 /// &/summary& private void ProcessRequest() { Response.ContentType = "text/html"; string json = Request.Form["json"]; //反序列化DataTable DataTable newdtb = Json2Dtb(json); //序列化DataTable为JSON string back = Dtb2Json(newdtb); Response.Write(back); Response.End(); } /// &summary& /// 处理异步请求 /// &/summary& private void ProcessRequest() { Response.ContentType = "text/html"; string json = Request.Form["json"]; //反序列化DataTable DataTable newdtb = Json2Dtb(json); //序列化DataTable为JSON string back = Dtb2Json(newdtb); Response.Write(back); Response.End(); }
在前台接受显示： [html]
代码如下: $(function() { //点击botton1 $("#botton1").click(function() { createTable(json); }); }); //显示Json中的数据 function createTable(json) { var table = $("&table border='1'&&/table&"); for (var i = 0; i & json. i++) { o1 = json[i]; var row = $("&tr&&/tr&"); for (key in o1) { var td = $("&td&&/td&"); td.text(o1[key].toString()); td.appendTo(row); } row.appendTo(table); } table.appendTo($("#back")); } $(function() { //点击botton1 $("#botton1").click(function() { createTable(json); }); }); //显示Json中的数据 function createTable(json) { var table = $("&table border='1'&&/table&"); for (var i = 0; i & json. i++) { o1 = json[i]; var row = $("&tr&&/tr&"); for (key in o1) { var td = $("&td&&/td&"); td.text(o1[key].toString()); td.appendTo(row); } row.appendTo(table); } table.appendTo($("#back")); }
这样，就完成了json向后台传输数据和显示后台数据了，当然，这种传输方式只是传输的一种，如果是简单的字符串也可以用get和post进行传输，但是，javascript本身具有不安全性和不稳定行，对于一些比较重要的数据，建议还是寻找一些更可靠的方法。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具8112人阅读
jQuery（8）
前后台数据交互一般都用json格式，后台可以直接将json对应转化为实体对象。方便以后的操作。jQuery向后台传数据的时候，我们会发现他会自动转化成查询字符串，不能真正传入一个json。而且用jquery对表单序列化的时候，返回的格式是一个数组，还需要作进一步转换。其实只要我们在ajax方法中配置一些东西就可以完成。代码如下：
&form id=&ff&&
&input type=&text& name=&test1&/&
&input type=&text& name=&test2&/&
&input type=&text& name=&test3&/&
&input type=&text& name=&test4&/&
&input type=&button& id=&save& value=&save&/&
$(&#save&).on(&click&, function () {
var params = $(&#ff&).serializeArray();
var j = {};
for (var item in params) {
j[params[item].name] = params[item].
url:'index.html',
data:JSON.stringify(j),
type:'post',
dataType:'json',
Accept:&application/json&,
&Content-Type&:&application/json&
processData:false,
cache:false
}).done(function (data) {
如果在chrome看到如图的显示格式，说明传入到后台的就是json格式
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：141081次
积分：1646
积分：1646
排名：千里之外
原创：30篇
评论：19条
(1)(1)(1)(1)(3)(1)(1)(2)(2)(3)(2)(2)(3)(2)(3)(2)(1)