最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS提交对象数组到C#服务端的两个方法
时间:2015-08-19 编辑:简简单单 来源:一聚教程网
方法一:利用ajax
1) 客户端js代码:
//获取对象数组 function GetQAS() { var stuAnswerList = []; var stuAnswer = { 'answerID': 1, 'answerType': 1, 'answerContent': 'one', 'answerSingle': 1, 'answerMultiple': '1,2', 'answerTOF': true }; var stuAnswer1 = { 'answerID': 1, 'answerType': 1, 'answerContent': 'two', 'answerSingle': 1, 'answerMultiple': '1,2', 'answerTOF': true }; stuAnswerList.push(stuAnswer); stuAnswerList.push(stuAnswer); return stuAnswerList; } //ajax提交数据 function SubmitStuAnswersAjax(stuAnswerArr) { $.ajax({ url: "../../Paper/SubmitStuAnswers", type: "post", data: { stuAnswerArr: stuAnswerArr }, async: false, cache: false, error: function (XMLHttpRequest, textStatus, errorThrown) { if (XMLHttpRequest.status == 1001) { eval(XMLHttpRequest.ResponseText); } else { alert("GetPaper error"); } }, success: function (data) { alert(data); } }); } //按钮点击方法 function SubmitStuAnswersBtn() { var stuAnswerArr = GetQAS(); SubmitStuAnswersAjax(stuAnswerArr); }
2) 服务端C#代码:
//stuAnswerEntity public class stuAnswerEntity { public int answerID { set; get; } public int answerType { set; get; } public int answerSingle { set; get; } public string answerMultiple { set; get; } public bool answerTOF { set; get; } public string answerContent { set; get; } } //stuAnswerArr 注意前后台变量名称一定要相同 public ActionResult SubmitStuAnswers(ListstuAnswerArr) { bool re = false; List stuAnswerEntityList = new List (); stuAnswerEntityList = stuAnswerArr; //此时stuAnswerArr中就存有前台stuAnswerArr中的数据; return Content(re.ToString()); }
方法二:js模拟form 进行post提交
1) 客户端js代码:
function REV_SubmitStuAnswersBtn() { var stuAnswerArr=JSON.stringify(GetQAS());//转成json字符串 //JS模拟post提交 var REVQForm = document.createElement("form"); REVQForm.setAttribute("method", 'POST'); REVQForm.setAttribute("action", '../Paper/GetREVPaper'); REVQForm.innerHTML = ""; var stuAnswerInput = document.createElement("input"); stuAnswerInput.setAttribute("type", "hidden"); stuAnswerInput.setAttribute("name", 'REVQ');//'REVQ' stuAnswerInput.setAttribute("value", stuAnswerArr); REVQForm.appendChild(stuAnswerInput); document.body.appendChild(REVQForm); REVQForm.submit(); }
2) 服务端C#代码:以json字符串的方式传输
public ActionResult GetREVPaper() { bool re = false; string stuAnswerJson = Request["REVQ"] == null ? "" : Request["REVQ"];//'REVQ' //将json字符串反序列化 ListstudentAnswerList = JsonConvert.DeserializeObject >(stuAnswerJson); return Content(re.ToString()); }
Jquery ajax传递对象(数组)到后台并解析的实现
项目中实现一个工作经历列表功能,动态添加,数据需要传递到后台。这里考虑到用户体验:该界面交互较多,多次添加和删除都是用js实现的。所以,最后传递数据到后台,我也是采用了jquery的ajax方法,读取js的缓存数据(array),传递到ashx中。
这里有个问题就是:jquery传递对象/数组,无法传递,并且服务端无法获取数据。
完整解决方案:
1、js对象创建:因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化。
所以要求,在js中创建一个对象,与后台C#的实体对象一致。
function WorkEx(depart, title, begintime, endtime) { this.SuId = 0; this.Id = 0; this.DepartmentName = depart; this.Title = title; this.BeginTime = begintime; this.EndTime = endtime; this.Description = ""; this.Enable = 0; return this; }
WorkEx对象,与C#对象完全一致。
2、Jquery $.ajax方法的配置
针对$.ajax方法的配置参数需要进行修改:
1)dataType: "json", traditional:true:数据类型必须是json。默认的话,traditional为false,即jquery会深度序列化参数对象,以适应如PHP和Ruby on Rails框架,
但servelt api无法处理,我们可以通过设置traditional 为true阻止深度序列化
2)这个是重点!需要把js对象进行json序列化,不然无法传递到服务端。
data: { Wl: JSON.stringify(WorkList) }
3)完整代码:
var AjaxUrl = "../../Service/sp.ashx"; $.ajax({ type: "post", dataType: "json", traditional:true, data: { Wl: JSON.stringify(WorkList) }, url: AjaxUrl, success: function (data, textStatus) { if (data != null) { if (data) { alert("添加成功,系统将会跳转到详情界面。"); window.location.href = "SuspectList.html"; } else { $("#btnAdd").attr("disabled", false); $("#btnAdd").text("再次提交"); } } }, complete: function (XMLHttpRequest, textStatus) { }, error: function (e) { $("#btnAdd").attr("disabled", false); $("#btnAdd").text("再次尝试提交"); } });
3、在服务器端进行反序列化:
1) 获取到post过来的数据: string worklist = CustomResponse.GetResponse("Wl");
2)反序列化:
List
listwork = Newtonsoft.Json.JsonConvert.DeserializeObject>(worklist);
Newtonsoft.Json.JsonConvert是一个微软的免费json转换工具。
Newtonsoft.Json 是.NET 下开源的json格式序列号和反序列化的类库.
官方网站: http://json.codeplex.com/
使用方法比较简单
1.首先下载你需要的版本,然后在应用程序中引用Newtonsoft.Json.dll 文件.
这样就可以直接转换成后台的实体了。
-
上一个: js替换字符串中最后一个字符的例子
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31