最近项目上的一个页面比较复杂,多次用到Json提交数据,顺便记录下来,以便以后查询.
js代码:
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
function onSubmit() {
var employee = {
Name: "chenxizhang",
Country: "China",
Orders: [
{ OrderID: 10248 },
{ OrderID: 10249 }
]
};
//debugger;
var testArrayJson = [];
var testJson;
var table = $("#tableJson")[0];
for (var i = 0; i < table.rows.length; i++) {
var temp = { //在此生成Json对象
Name: table.rows[i].cells[0].innerText,
Country: table.rows[i].cells[1].innerText,
Orders: [
{ OrderID: table.rows[i].cells[2].innerText }
]
};
testJson += JSON.stringify(temp) + ","; //把所有Json对象转成字符串
}
testJson = "[" + testJson.substring(0, testJson.length - 1).replace('undefined', '') + "]";//组合json对象
testArrayJson = eval('(' + testJson + ')'); //使用Eval转换为Json对象
//发送POST请求,数据也是json格式。但数值部分需要转换为字符串
$.post("Ajax.aspx", { data: JSON.stringify(testArrayJson) }, function (result) {
//alert(result);
var r = JSON.parse(result);
alert(r.Message);
});
}
</script>
页面代码:
<input type="button" value="Submit" onclick="onSubmit();" />
<table id="tableJson">
<tr>
<td>
test1
</td>
<td>
China
</td>
<td>
123
</td>
</tr>
<tr>
<td>
test2
</td>
<td>
China
</td>
<td>
456
</td>
</tr>
<tr>
<td>
test3
</td>
<td>
China
</td>
<td>
789
</td>
</tr>
</table>
本实例是用js遍历table 取出每行的属性或列值.组成json对象,发送到Ajax.aspx页面进行处理.
Ajax.aspx 处理部分.(页面部分除了第一行服务器标记外一定要删除)
protected void Page_Load(object sender, EventArgs e)
{
try
{
var ser = new DataContractJsonSerializer(typeof(Employee[]));
var data = Request["data"];
var ms = new MemoryStream(Encoding.UTF8.GetBytes(data));
var emp = (Employee[])ser.ReadObject(ms);
ms.Close();
//此时已经得到了相应的Employee实例,可以进行服务器端的处理
var ser2 = new DataContractJsonSerializer(typeof(ActionResult));
var ms2 = new MemoryStream();
var result = new ActionResult() { Code = 200, Message = emp[0].Name+ emp[0].Country };
ser2.WriteObject(ms2, result);
ms2.Position = 0;
var buffer = new byte[ms2.Length];
ms2.Read(buffer, 0, buffer.Length);
ms2.Close();
Response.Write(Encoding.UTF8.GetString(buffer));
}
catch()
{
}
}
以下是定义的服务器端实体类:
public class Employee
{
public string Name { get; set; }
public string Country { get; set; }
public OrderItem[] Orders { get; set; }
}
public class OrderItem
{
public int OrderID { get; set; }
}
public class ActionResult
{
public int Code { get; set; }
public string Message { get; set; }
}
分享到:
相关推荐
毕业设计基于JavaWeb实现的一个备忘录系统项目源码。难度适中,新手自己可操作 备忘录 介绍 后端部分基于Servlet、Jdbc实现. 前端部分基于Layui、jqury实现。 一个简单的前后端分离Demo,前后端交互JSON数据格式 ...
备忘录app(免积分下载) 2022年软件工程专业上学期的一个安卓的课设。 开发工具:androidStudio 开发语言:Java 详细情况请看我的文章介绍: http://t.csdn.cn/4Lb3D
小程序之备忘录开发的源码,微信的react的特性使它很适合用来开发这种单机版简单交互的备忘录。在本示例中,初始时页面只有一个简简单单的欢迎词和文本框,当聚焦文本框开始输入文字,下方出现提交及重置按钮,默认...
用flutter框架实现的备忘录,可直接用vs code编译运行,功能简单,可参考学习一些简单布局,数据存储以及json序列化等
自定义日历备忘录控件使用jquery和javascript做的。里面有年月日和事件清单List。在年月日的画面里面,每个日期里面都包含了当天的事件信息。数据源采用json格式。
NULL 博文链接:https://gongchangming.iteye.com/blog/421351
4. Easy Mork: easy-mock 用于后台的模拟,得到JSON数据; 5. weui框架引入, 例如个人信息界面,用weui可以很快很方便的做 微信小程序开发和传统的H5开发还是有些不同的, 容易踩坑。 小程序是基于MVVM的的框架,...
备忘录对象的 JSON 定义: {title:"Memo title", key:"unique key generated from date/time of save", data:"memo content"} 使用的库 jQuery 用户界面 修订说明 2013.11.13@10:20AM - 实现了一个基本的...
蜘蛛备忘录守护者互动项目。入门如果您尚未安装 、 和 ,请先安装。 接下来,安装所有依赖包并启动应用程序: > npm install> bower install> grunt 您现在可以查看在运行的示例项目资产路径当您想要指向资产的路径...
Google Chrome浏览器的记事本Notes Backuper扩展程序将所有Yahoo记事本笔记保存为单个ZIP文件(TXT或JSON格式),文件名中包含备份日期,以提供更多便利。 由于Chrome浏览器的安全性限制,该插件无法在带有“ ...
该工具允许对CRUD(C reate - [R EADùPDATE d elete) 记录存储在JSON文件中(默认情况下位于~/Documents/inbox.json ),以导出到其他工具。 从文件~/.memoru.json中读取选项安装npm install memoru用法创建记录...
MyBoard应用在上运行的示例应用程序。 它允许数据主体对其进行编辑并查看其他人的公告板。安装待定有关修改此应用程序和构建自己的应用程序的说明...关系定义为bar / 00_meta / 10_relations.json getAppReadRole = fun
matlab代码sqrt Markdown 编辑器语法指南 基本技巧 ...json, lisp, lua, markdown, matlab, nginx, objectivec, perl, php, python, r, ruby, scala, smalltalk, sql, tex, vbscript, xml 也可以使用
备忘录茶盘需要机器人帐户Skype | Slack | Hipchat 用于桥接的账号必须是新账号,请勿使用您的账号。 Skype | Slack | Hipchat帐户必须是新帐户。我不使用我的帐户。桥接Skype 茶盘使用 Skype4Py,它有一些要
备忘录 1.在GitHub上注册 如果您还没有在上的帐户,请注册。 2.创建一个叉子 ,然后单击右上角的“ Fork”按钮。 学院的资源库将被复制到您的帐户中。 结果会是这样的: 3.将存储库克隆到您的计算机 注意:您需要...
备忘录1.在GitHub上注册如果您还没有在上的帐户,请注册。2.创建一个叉子,然后单击右上角的“ Fork”按钮。 学院的资源库将被复制到您的帐户中。 结果会是这样的:3.将存储库克隆到您的计算机注意:您需要克隆存...
备忘录1.在GitHub上注册如果您还没有在上的帐户,请注册。2.创建一个叉子,然后单击右上角的“ Fork”按钮。 学院的资源库将被复制到您的帐户中。 结果会是这样的:3.将存储库克隆到您的计算机注意:您需要克隆存...
备忘录1.在GitHub上注册如果您还没有在上的帐户,请注册。2.创建一个叉子,然后单击右上角的“ Fork”按钮。 学院的资源库将被复制到您的帐户中。 结果会是这样的:3.将存储库克隆到您的计算机注意:您需要克隆存...
备忘录 1.在GitHub上注册 如果您还没有在上的帐户,请注册。 2.创建一个叉子 ,然后单击右上角的“ Fork”按钮。 学院的资源库将被复制到您的帐户中。 结果会是这样的: 3.将存储库克隆到您的计算机 注意:您需要...