【www.guakaob.com--国际注册汉语教师】
.Net Ajax上传数组（Json）到后台，以及后台的处理过程 当前台页面要求用AJAX一次传送较多数据到后台时，用数组的形式传送，会方便不少。例如：当用户注册时，可以用AJAX把注册时相应的信息放到一个数据里，然后传送给后台。
再有，当要传送的数据为多组，且每组数据也有多个不同信息时(比如说，我们要上传多个用户的QQ号和姓名，每个用户的信息为一组，而每一组中，又有QQ号和姓名两个不同信息)，用JSON数组的形式传送数据应该是不错的选择，像这样，
[{‘num’:’123456’,’name’:’张三’},{‘num’:’456789’,’name’:’李四’}] 以这样的形式传送数据会方便不少。
我在网上查了查，大概还不好找到这些，总结了一下，就写了个小结：
首先
在前台页面里要引入JQuery(我测试是用的jquery-1.5.1.js 更高版本应该也没问题)
在新建的项目里引用Newtonsoft.Json.dll （这是已经开发好了的处理Jsono数据的东西，在网上一查应该就能找到，建议使用.net3.5版本的），如图：
前台：
<script type="text/javascript">
//假设要上传的数据如下JSON数组
var theJsonArr = [{ 'name': 'aaa', 'QQnum': '123456' }, { 'name': 'bbb', 'QQnum': '456789'}]; var theJsonStrArr = []; //用于存放JSON对象转化生成的字符串
for (var i = 0; i < theJsonArr.length; i++) {
theJsonStrArr.push(JSON.stringify(theJsonArr[i]));
//其中JSON.stringify()方法是JQUERY中将JSON对象转化为JSON字符串的函数 }
$.ajax({
type: 'post',
url: '/Home/Index',
data: { "informList": theJsonStrArr }, //前台写informList 后台也要写成informList dataType: 'text',
traditional: true,
success: function (returnStr) {
alert("后台返回的TEXT类型的内容为：" + returnStr);
},
error: function () { }
});
</script>
后台（以ASP.net MVC3为例）：
public ActionResult Index(List<string> informList)//后台写informList 前台也要写成informList {
string jsonName = "";
foreach (var inform in informList)
{
//引入Newtonsoft.Json.dll
//引入命名空间： using Newtonsoft.Json.Linq; using Newtonsoft.Json;
JObject jo = (JObject)JsonConvert.DeserializeObject(inform);
//jo["name"]对应前台的JSON中name,
//同理，jo["QQnum"]则对应前台的JSON中QQnum
jsonName += jo["name"].ToString()+"|";
}
return Content(jsonName);
}
前台弹出窗口内容为：
后台返回的TEXT类型的内容为：aaa|bbb|
当要传送的数据为多组，且每组数据也有一个信息(比如要上传大量手机号）时，可以用简单的字符串数组来传送数据，上面的内容就还需要改动，但是如果依然用JSON数组传送数据的话，也不会有问题，像这样：[{‘tel’:’13965478956’},{‘tel’:’13966897548’}] 这样，上面已有的代码只要做稍许改动就可以了。
所以，以上方法，应该可以解决不少AJAX向后台传送数据的问题，还算综合一点，应用面会广泛一些。
以上方法涉及到一些javascript的基础，还有些边边角角的知识点忽略，旨在说明问题、解决问题，如果有说的不清楚的地方，不妨在文档的评论或留言等等能与我交流的模块指明，以便进一步完善。
Jquery json数据多维数组遍历
1)、Php与jquery进行ajax交互时返回的数据data，将返回的json数据字符串转换为json对象eval(data). 2)、对转换后的data的json类型的对象进行遍历:结果如下：
var showscr = $("#showscr");
strs = '<ul style="list-style-type:none;">';
for(i in scrs){ for( keys in scrs[i]){ if(keys == 'scr'){ strs += "<li
style='float:left;width:240;height:480'><img width='240' height='450' src=class='delsrc' rel='"+scrs[i].scr+"'>删除</span>";
}else if(keys == 'scrname'){
} strs +="</ul>" showscr.html(strs); } } strs += "<b>"+scrs[i].scrname+"</b></br></li>";
注，这是部分代码，仅供参考。实际操练需看自己的实际需求而定。
1、ajax
(1)是什么？ asynchronous javascript and xml: 异步的javascript和xml
通过浏览器内置的一个对象(XmlHttpRequest)异步地向服务器发送请求，（所谓异步，指的是浏览器并没有抛弃整个页面，用户仍然可以操作原有的页面），服务器在处理完请求之后，返回数据给XmlHttpRequest,通过javascript,更新页面。整个过程当中，用户不用等待服务器的响应。
(2)ajax编程 a,XmlHttpRequest对象 该对象由浏览器实现（该实现并没有标准化）， 在创建该对象时，要区分浏览器。代码在下边
2)该对象的重要属性
responseText:获取服务器响应的文本数据
responseXml:获取服务器响应的xml数据
status:获取服务器返回的状态码(比如200正常)
readyState:获取XmlHttpRequest与服务器通讯的状态(0,1,2,3,4)【ajax拼装json数组】
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 1 (初始化) 对象已建立，尚未调用send方法 2 (发送数据) send方法已调用。 3 (数据传送中)已接收部分数据，此时，数据不完整。 4 (响应结束),此时，可以通过responseText/responseXml 获取数据了。//一般用这个状态【ajax拼装json数组】
//同步和异步说的是相对于js引擎的线程，同步的…就是发送完ajax请求
(xmlHttpRequest.send(null)后立马等待回调函数运行完)，会等待回调函数执行完，才会继续运行后面的js;
//异步的…就是发送完请求立即继续运行，等请求的内容获取到之后再单独调用回调函数。 //验证表单时，要用flag作为return;回调函数中用来修改flag的值,不能有return,即使有，它没有接受者，会被抛弃。
Post和Get 方法有如下区别:
1.Post传输数据时，不需要在URL中显示出来，而Get方法要在URL中显示。
2.Post传输的数据量大，可以达到2M，而Get受到URL长度的限制,只能传递大约1024字节.【ajax拼装json数组】
3.Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据. get 方法用Request.QueryString["strName"]接收
post 方法用Request.Form["strName"] 接收
注意：
虽然两种提交方式可以统一用Request("strName")来获取提交数据，但是这样对程序效率有影响，不推荐使用。
一般来说，尽量避免使用Get方式提交表单，因为有可能会导致安全问题
总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之,一般用POST。
-------------------------代码：---------------------------
//获得XmlHttpRequest对象 function getXmlHttpRequest(){//得到XmlHttpRequest对象 var xmlHttpRequest = null; if ((typeof XMLHttpRequest) != 'undefined') {
xmlHttpRequest = new XMLHttpRequest();//非ie浏览器
}else {
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp'); //ie浏览器
}
return xmlHttpRequest;
} //采用get方式 function valiusername(){//onblur事件 var xmlReq = getXmlHttpRequest(); var url="valiusername.do?username=" + $F('username');//servletxmlReq.open("get",encodeURI(url),true);// encodeURI(url)指定客户 浏览器向服务器发送请求时采用utf-8来编码,它是js内置函数 xmlReq.onreadystatechange=function(){ } if(xmlReq.readyState == 4){ if(xmlReq.status == 200){//200表示正常返回 var resText = xmlReq.responseText; $('username_msg').innerHTML = resText;//更新内容 }else{ } $('username_msg').innerHTML = 'system error'; ---------------------------------------------------- 里要写对应的代码if(path.equals("valiusername"))//get方式参数写在url中 }else{//其他状态码数据还没正常返回，表示正在验证 $('username_msg').innerHTML = 'checking...'; } xmlReq.send(null);//get方式send为null } //采用post方式 function valiusername(){ var xmlReq = getXmlHttpRequest(); var url='valiusername.do'; xmlReq.open('post',url,true);//url中无参数 //采用post方式要加个消息头(协议) xmlReq.setRequestHeader("Content-Type", xmlReq.onreadystatechange=function(){ ---------------------------------------------------- "application/x-
} if(xmlReq.readyState == 4){ } if(xmlReq.status == 200){ var resText = xmlReq.responseText; $('username_msg').innerHTML = resText; }else{ $('username_msg').innerHTML = '系统错误'; } $('username_msg').innerHTML = 'checking...'; }else{ xmlReq.send('username=' + $F('username'));//post请求参数 } ---------------------servlet端-------------------------------
public void service (HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
} request.setCharacterEncoding("utf-8"); //采用post方式发请求时，服务器要以utf-8打开，因为浏览器以该格式编码 response.setContentType("text/html;charset=utf-8"); //向流中输出数据用utf-8或GBK都行，并告诉浏览器以该编码打开 String productType = request.getParameter("productType"); String str = null; if (productType.equals("type")) { str = "name,--请选择--"; }else if (productType.equals("car")) { str = "bmw,宝马520;qq,qqme;cherry,奔驰100"; }else if (productType.equals("ryp")) { str = "r1,牙膏;r2,牙刷;r3,香皂;r4,洗面奶;r5,洗发露"; } PrintWriter out = response.getWriter(); out.println(str);//直接把响应数据out.println()就可以了 out.close();
//普通的只是向客户端发送了String; JSON可向客户端发送对象
JSON:
javascript object notation,它是一种轻量级的数据交换语言，一般用于客户端（浏览器）与服务器端进行数据交换（即服务器端生成符合json语法格式的字符串，发送给客户端，然后，客户端再将该字符串转换成javascript对象）。
(1)json语法 对象: {'propName':'value'} 其中，propName代表属性名，必须用''或者""括起来， value代表值，如果值是string，也必须用'',或者""括起来。 值还可以是null,true/false,当然，也可以是一个对象。 比如：{'address':{'city':'bj','room':'200'}} 数组：[{'propName':'value'},{'propName':'value'}]; step1 导入json相关的包 step2 使用json中的两个类 JSONObject,JSONArray来做转换。 对于java对象,使用JSONObject转换 对于java对象数组或者List,使用JSONArray (2)如何将java对象或者集合转换成符合json语法格式的字符串
使用JSONObject转换:
JSONObject json = JSONObject.fromObject(user,config); 使用JSONArray:
List<User> users = new ArrayList<User>();
users.add(user);users.add(user2); JSONArray json = JSONArray.fromObject(users); 可以自定义转换规则config，其步骤是： step1 写一个转换器，该类要实现JsonValueProcessor接口 //覆盖processArrayValue()和processObjectValue方法 step2 用的时候注册转换器 DateProcessor processor = new DateProcessor("yyyy-MM-dd HH:mm:ss");//new一个日期类型的转换;自己写的; JsonConfig config = new JsonConfig(); config.registerJsonValueProcessor(Date.class,processor);//注册 转换器//对于Date类型，使用自定义的转换器 JSONObject json = JSONObject.fromObject(对象,config) step3 用该转换器转换 参考相应代码:G:\文档\知识点整理\referenceCode\AJAX+JSON\json传回对象 (3)如何将符合json语法格式的字符串转换成js对象 使用prototype中的evalJSON()函数。 if(xmlReq.readyState == 4){
var rsTxt = xmlReq.responseText; var stock = rsTxt.evalJSON();//prototype里的方法evalJSON() $('d1').innerHTML='股票名称:'
+ stock.stockName + ' 股票价格:' }
(4)在ajax应用中，如何使用json做数据交换？ step1 在服务器端，使用json工具将对象或者数组转换成符合json的字符串，然后 发送给客户端（即浏览器） JSONArray json = JSONArray.fromObject(list); PrintWriter out = response.getWriter(); out.println(json.toString()); out.close(); step2 在客户端，将json字符串转换成js对象,步骤(3) step3 使用javascript，通过js对象获取数据，更新界面。 练习 ： 可以在body里写<body onload="f1();" > 1，每隔2秒钟显示3支股票的最新名称与价格(json)。 2, 每隔20秒显示当前销量前3名的产品（热卖商品显示）
参考相应代码:G:\文档\知识点整理\referenceCode\AJAX+JSON\StockUpdate