`

jQuery中对异步提交JSON和XML数据的处理方式

jsonXMLjQuery数据结构Ajax 
阅读更多
  最近在项目中用到Jquery，感觉真的不错，开源的插件也比较多。
  项目中，我随手记录一些常用的方法。也是刚刚学习，有问题大家一起讨论，
  希望能留下宝贵意见！
   首先，在JQuery中AJAX请求一般有
   $.post(url,data,callback)  $.get(url,data,callback) 
   $.ajax  (options)...
  以post为例JSON数据处理方式：

1. html code:
  
<div id="export" style="position:absolute;z-index:auto;display: none">
				<input id="exportPath" type="file"/>
		 		<input type="button" id="exportOK" value="OK"/>
		 		<input type="button" id="exportCancel" value="Cancel"/>
		 		<span>exporting...</span>
	  </div>

2.jQuery code:
  
  $('#OK').click(
		function(){
			$('#import span').show();
			$.post(
				path+"/importinfo/importFile.do",
				{filePath:$('#filePath').val()},
				function(data) {
					if ("error" == data) {
						$('#import span').hide();
						jAlert('warning','please select sdFile!','warning');   
						return;
					}
					if ("errornull" == data) {
						$('#import span').hide();
						jAlert('error','the sdfile cannot be empty!','error'); 
						return;
					}
					if ("errorimport" == data) {
						$('#import span').hide();
					    jAlert('error','import error!','error'); 
						return;
					}
					$('#import').hide('normal');
					var da =eval(data);
					var msg ='all num: ' + da[0]["all"] + ';  imported num:' + da[0]["imported"] + ';  failed num: '+ da[0]["failed"];
					jAlert('success',msg,'success');
			})
	});

3.由post url执行的action. java code 
	@RequestMapping
	public void importFile(@RequestParam("filePath")
	String filePath, String isDuplicate, String isHaltOnError, String isEmpty,
			HttpServletResponse response) {

		logger.info("preview sdfile action....");
		if (StringUtils.isEmpty(filePath)
				|| !"sdf".equalsIgnoreCase(StringUtils.substringAfterLast(
						filePath, "."))) {
			MessageUtils.outputJSONResult("error", response);
			throw new IllegalArgumentException("cant not find sdf file.");
		}

		File inputFile = new File(filePath);
		if (!inputFile.isFile() || inputFile.length() <= 0) {
			MessageUtils.outputJSONResult("errornull", response);
			throw new IllegalArgumentException("file error!");
		}

		ImporterCondition ic = new ImporterCondition();
		ic.setAllowDuplicate(true);
		ic.setHaltOnError(true);
		ic.setEmptyStructuresAllowed(false);
		int[] rs = compoundService.batchRegister(inputFile, ic);
		if (rs[1] <= 0) {
			MessageUtils.outputJSONResult("errorimport", response);
		}
		Map<String, String> map = new HashMap<String, String>(3);
		map.put("all", String.valueOf(rs[1]));
		map.put("imported", String.valueOf(rs[0]));
		map.put("failed", String.valueOf(rs[2]));
		MessageUtils.outputJSONResult(JSONArray.fromObject(JSONObject.fromObject(map)).toString(), response);//create jsonArray
	}

//MessageUtils.java
public class MessageUtils {
	public static void outputJSONResult(String result, HttpServletResponse response) {
		try {
			response.setHeader("ContentType", "text/json");
			response.setCharacterEncoding("utf-8");
			PrintWriter pw = response.getWriter();
			pw.write(result);
			pw.flush();
			pw.close();

		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	public static void outputXMLResult(String result, HttpServletResponse response) {
		try {
			response.setHeader("ContentType", "xml");
			response.setCharacterEncoding("utf-8");
			PrintWriter pw = response.getWriter();
			pw.write(result);
			pw.flush();
			pw.close();

		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}


XML处理方式：

1.html代码 （用的是jmesa第三包完成页面table的封装，它的功能很强大，正在学习中.. 
 <body>
  <input type="hidden" id="filePath" value="${filePath}"/>
		<!-- content-results start -->
		<div id="content-results">
			<c:if test="${not empty html}">
				${html}
			</c:if>
			<p style="text-align: center;">
		 		<input type="button" id="viewOK" value="Import"/>
 				<input type="button" id="viewCancel" value="Cancel" onclick="window.close()"/>
 				<span style="display: none">importing...</span>
 			</p>
		</div>
		<!-- content-results end -->
 
 </body>

2. jQuery 代码 
var path='${pageContext.request.contextPath}';
			function onInvokeAction(id) {//解决jmesa分页问题
			    	var parameterString = createParameterStringForLimit(id);
			    	var filePath = $('#filePath').val();
			    	$.post(
			    		path+"/importinfo/preViewSDFJump.do?"+parameterString,
			    		{filePath:filePath},
			    	function(data){
			    		callBackFunction(data);
			    	}
		    	)
		    }
		   
		    function callBackFunction(data){
		    	if("nomatch" == data){
					$("#content-results").html("");
					jAlert('warning', "no data matching!!!!", 'Warning');
					return;
				}
				if("error" == data){
					$("#content-results").html("");
					jAlert('warning', "occur error!", 'Warning');
					return;
				}
				if("nodata" == data){
					jAlert('warning', "Please select the data!", 'Warning');
					return;
				}
				$("#content-results").html(data);
		    }

3.java代码 
 @RequestMapping
	public void preViewSDFJump(@RequestParam("filePath")String filePath, 
			HttpServletResponse response, final HttpServletRequest request) throws IOException{
    	logger.info("preview sdfile jump action....");
		if (StringUtils.isEmpty(filePath)|| !"sdf".equalsIgnoreCase(StringUtils.substringAfterLast(filePath, "."))) {
			MessageUtils.outputJSONResult("error", response);
			throw new IllegalArgumentException("cant not find sdf file.");
		}
 
		File inputFile = new File(filePath);
		if (!inputFile.isFile() || inputFile.length() <= 0) {
			MessageUtils.outputJSONResult("errornull", response);
			throw new IllegalArgumentException("file error!");
		}

		//parse sdfile to Map object
		Map<String,Object> sdfMap = ParseSDFileUtil.parseSDF(inputFile);
		//trans result map to html
		String html = this.translatetoHtml(sdfMap, request);
		
		if(null == html){
			MessageUtils.outputJSONResult("nomatch", response);
			throw new IllegalArgumentException("no data.");
		}
		MessageUtils.outputXMLResult(html, response);
    }

   /**
     * trans object to html
     * @param sdfMap
     * @param request
     * @return
     */
    private String translatetoHtml(Map<String,Object> sdfMap, final HttpServletRequest request) {
    	//failed to parse file
		if (sdfMap == null || sdfMap.size() <= 0) {
			return null;
		}
		
		//get parsed result
		List<Map<String,String>> sdfList = (List<Map<String, String>>) sdfMap.get("result");
		String[] keys = (String[]) sdfMap.get("fields");
		
		//set fields to dynamic class
		DynaClass  structureClass = createBasicDynaClass(keys);
		
		try {
			//set property to dynamic object.
			List<DynaBean> results = new ArrayList<DynaBean>();
			for (Map<String, String> structure : sdfList) {
				DynaBean stru = structureClass.newInstance();
				for (String key : keys) {
					stru.set(key, structure.get(key));
				}
				results.add(stru);
			}
			
			//set sdf objects to session.
			request.getSession().setAttribute("results", results);
			
			//create jmesa objects.
			TableFacade tableFacade = TableFacadeFactory.createTableFacade("structuresTable", request);
			tableFacade.addFilterMatcher(new MatcherKey(Object.class), new StringFilterMatcher());
			tableFacade.setColumnProperties(keys);
			tableFacade.setMaxRows(10);
			tableFacade.setMaxRowsIncrements(10, 20, 30);
			tableFacade.setItems(results);
			HtmlTable table = (HtmlTable) tableFacade.getTable();
			// table.getTableRenderer().setWidth("600px");
			table.getRow().setUniqueProperty("structure");
			HtmlColumn molColumn = table.getRow().getColumn("structure");
			molColumn.setTitle("structure");
			molColumn.setFilterable(false);
			molColumn.setSortable(false);
			molColumn.getCellRenderer().setCellEditor(new CellEditor() {
	            public Object getValue(Object item, String property, int rowcount) {
	            // Object value = new BasicCellEditor().getValue(item, property,
				// rowcount);
	                HtmlBuilder html = new HtmlBuilder();
	                html.append("<img width='140' src=\""+request.getContextPath()+"/importinfo/structureImage.do?rowcount="+rowcount+"\"/>");
	                html.aEnd();
	                return html.toString();
	            }});
				return tableFacade.render();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (InstantiationException e) {
			e.printStackTrace();
		}
		return null;
    }


未完待续...
  • 大小: 10.3 KB
  • 大小: 86.4 KB
分享到：
| IE8/IE7/IE6下Select列表中disabled的使用
评论
7 楼 yaofeng911 2009-07-21  
mark35 写道
yaofeng911 写道


简单的JSON数据返回是没有必要用jsonObject处理，如果你需要将一个或多个object组装成json格式是比较麻烦，比如:我需要将List<User>这个集体合做为josn数据传递.


对java不了解。个人看法只要对象能被序列化就能作为json格式传输，客户端操作json对象就如同操作数组一般。


你说的没错。呵呵。thanks!
6 楼 mark35 2009-07-21  
yaofeng911 写道


简单的JSON数据返回是没有必要用jsonObject处理，如果你需要将一个或多个object组装成json格式是比较麻烦，比如:我需要将List<User>这个集体合做为josn数据传递.


对java不了解。个人看法只要对象能被序列化就能作为json格式传输，客户端操作json对象就如同操作数组一般。
5 楼 zozoh 2009-07-20  
对于容器类，无论是 Map，还是 Collection 甚至数组，Nutz.Json 都能正确的转换和输出
4 楼 zozoh 2009-07-20  
yaofeng911 写道
mark35 写道
jquery支持直接操作json返回数据呀。

$.get/post 以及 $.ajax 都支持json返回格式的定义。比如
jQuery.post(url, [data], [callback], [type]) ，最后这个type你写成json就可以对返回的数据进行如同访问对象一般的直接操作。

比如服务器端返回json数据结构如下：
$r = {state:1, msg:'success', data:'xxxxxx'}
那么在客户端可以直接处理：
$.get(
url,
function(rdata) {
  if (rdata.state > 0 ) {  alert(rdata.msg) }
},
'json');


简单的JSON数据返回是没有必要用jsonObject处理，如果你需要将一个或多个object组装成json格式是比较麻烦，比如:我需要将List<User>这个集体合做为josn数据传递.


你可以试用一下 Nutz.Json， 这里是项目首页 http://nutz.googlecode.com/
Nutz.Json 可以将 Java 对象转换成JSON字符串或者加入输出流，它也可以从JSON格式的字符串或者是输入流中获取一个 Java 对象
比如 

Person p = Json.fromJson(Person.class,"{id=1,name='333'}");
p.setName("Peter");
System.out.println(Json.toJson(p));

3 楼 yaofeng911 2009-07-20  
mark35 写道
jquery支持直接操作json返回数据呀。

$.get/post 以及 $.ajax 都支持json返回格式的定义。比如
jQuery.post(url, [data], [callback], [type]) ，最后这个type你写成json就可以对返回的数据进行如同访问对象一般的直接操作。

比如服务器端返回json数据结构如下：
$r = {state:1, msg:'success', data:'xxxxxx'}
那么在客户端可以直接处理：
$.get(
url,
function(rdata) {
  if (rdata.state > 0 ) {  alert(rdata.msg) }
},
'json');


简单的JSON数据返回是没有必要用jsonObject处理，如果你需要将一个或多个object组装成json格式是比较麻烦，比如:我需要将List<User>这个集体合做为josn数据传递.
2 楼 mark35 2009-07-19  
jquery支持直接操作json返回数据呀。

$.get/post 以及 $.ajax 都支持json返回格式的定义。比如
jQuery.post(url, [data], [callback], [type]) ，最后这个type你写成json就可以对返回的数据进行如同访问对象一般的直接操作。

比如服务器端返回json数据结构如下：
$r = {state:1, msg:'success', data:'xxxxxx'}
那么在客户端可以直接处理：
$.get(
url,
function(rdata) {
  if (rdata.state > 0 ) {  alert(rdata.msg) }
},
'json');
1 楼 yaofeng911 2009-07-15  
补充：
使用JSONObject.fromObject(map).toString()返回json数据后，到页面上格式为：
{"a":"b","c","d"}的字符串，需要将此字符串转换成为JSON数据，使用eval(data)就会报错，正确的方法是使用：data = eval('('+data+')');就可以取得josn格式的数据。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    springmvc + jquery + ajax + json 异步传递数据

    springmvc jquery ajax json 异步传递数据 springmvc异步传递请求 已包含全部源代码实现 把jar包放入 然后新建文件 配置xml ！！！！！ 全部资源

    详谈 Jquery Ajax异步处理Json数据.

    所谓的Ajax.... } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List&lt;&gt;)、类. 但都返回Json格式

    jquery xml转json插件

    jquery的一个插件，可将xml格式内容转为json格式内容。支持ajax异步。该插件值得拥有. JS中有开源官方地址，可查看demo

    Struts2+JSON+jQuery实现异步交互数据时选择要序列化的属性（二使用XML配置方式）

    NULL 博文链接：https://zyw090111.iteye.com/blog/724574

    Ajax-JQuery-JSON-Form-Binding.zip

    Ajax-JQuery-JSON-Form-Binding.zip,用于将json数据绑定到表单的轻量级插件。对于使用ajax和具有大量字段的表单很有用。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和...

    httpxmlRequest+ajax+jquery+fastjson+jsp异步通讯实战案例精讲

    6.利用JQuery的$.ajax，$.post，$.get方法，分别返回text,xml,json等格式数据，通过fastjson生成JSON格式数据； 7.使用JQuery的ajax技术，在一个页面实现新增、修改、删除、查询、分页，文件上传等功能；

    jsp中json的应用

    有的时候我们喜欢用xml格式来交互数据，那样太耗资源了，而且效果不是很好。如果json也能做xml一样的事情，那你一定会爱上它，这里为了方便我们使用jquery来操作异步处理

    AJAX和jQuery动态加载数据的实现方法

    这里的AJAX不是希腊神话里的英雄，也不是清洁剂品牌，更不是一门语言，而是指异步Javascript和XML（Asynchronous JavaScript And XML），这里的XML（数据格式）也可以是纯文本（Plain Text）或是JSON。简单的说，...

    jQuery权威指南-源代码

    6.1.5　jQuery中异步加载XML文档/168 6.2　请求服务器数据/170 6.2.1　$.get()请求数据/170 6.2.2　$.post()请求数据/172 6.2.3　serialize()序列化表单/175 6.3　$.ajax()方法/177 6.3.1　$.ajax()的基本概念/177 ...

    SpringMVC环境下实现的Ajax异步请求JSON格式数据

    首先是常规的spring mvc环境搭建，不用多说，需要注意的是，这里需要引入jackson相关jar包，然后在spring配置文件“springmvc-servlet.xml”中添加json解析相关配置，我这里的完整代码如下： &lt;?xml version=1.0 ...

    Ajax-crud-ajax-json-jquery-php.zip

    Ajax-crud-ajax-json-jquery-php.zip,crud-ajax、php、jquery,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页...

    基于jQuery的控件源码

    XML 数据源 是Xml数据源的实例，效果和前者基本一致，只是数据源不同 格式化Table 是将一个已经存在的Html表格格式化成一个flexigrid Style Table 访问数据库 是一个连接数据库的实例数据源为Json。演示...

    Ajax-JavaScript-AJAX-JSON.zip

    Ajax-JavaScript-AJAX-JSON.zip,基本ajax json jquery,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况...

    超实用的jQuery代码段

    8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章...

    JQuery权威指南源代码

    get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()方法发送请求 第7章 validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ...

    Web前端Ajax&JQuery视频教程课件

    本套Java教程涵盖Ajax的实现原理，XMLHttpRequest实现Ajax，回调函数，Ajax数据交换格式(HTML、XML、JSON)，Ajax发送GET和POST请求，异步编程模型和同步编程模型，解决Ajax的GET请求缓存问题，使用Ajax验证用户名...

    jquery插件使用方法大全

    　jQuery 1.0（2006年8月）：该库的第一个稳定版本，已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。 jQuery 1.1（2007年1月）：这一版大幅简化了API。许多较少使用的方法被合并，减少了需要掌握和解释的...

    Jquery Ajax解析XML数据(同步及异步调用)简单实例

    代码如下:$.ajax({ async: true, /... type: “POST”, // 默认:GET 请求方式:[POST/GET] dataType: “xml”, //默认[“xml”/”html”] 返回数据类型:[“xml” / “html” / “script” / “json” / “jsonp”] u

Magicbox
Global site tag (gtag.js) - Google Analytics