`

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格式的数据。
发表评论

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

相关推荐

    json数据jquery异步示例

    以上就是关于"json数据jquery异步示例"的相关知识点，涵盖了JSON数据的创建、传输、解析以及jQuery中的异步操作和事件处理。在实际应用中，还需要考虑性能优化、安全性等问题，确保数据交互的高效和安全。

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

    1. Ajax与异步处理概念：异步处理指的是前台页面的JavaScript能够调用后台方法，而不需要刷新页面即可与服务器交互数据，这一技术改变了传统网页必须通过刷新才能提交数据、接收结果的交互方式。Ajax（Asynchronous ...

    使用jQuery.form插件，实现完美的表单异步提交

    在Web开发中，异步表单提交是一种常见需求，它能提供更好的用户体验，因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、...

    整合jquery+json+struts2异步提交实例

    在这个实例中，“整合jquery+json+struts2异步提交”是一个典型的前端与后端交互的示例，利用了jQuery的Ajax功能和Struts2框架处理JSON数据。下面我们将详细探讨这些技术及其相互配合的工作原理。 **jQuery** 是一...

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

    实现SpringMVC、jQuery、Ajax和JSON的异步传递数据，首先需要配置SpringMVC的DispatcherServlet和相关映射。在`web.xml`中，你需要定义一个Servlet来处理所有的HTTP请求。然后，在SpringMVC的配置文件中，设置视图...

    jquery xml转json插件

    该插件的主要功能是将XML文档转换成JSON对象，使得在jQuery或JavaScript环境中能够更方便地操作和解析数据。这个插件特别适用于处理那些由服务器返回的XML数据，尤其是当服务器无法直接提供JSON格式的情况下。 首先...

    jquery-form 异步提交表单

    为了解决这个问题，jQuery Form插件应运而生，它允许我们实现异步（Ajax）表单提交，提高页面的响应性和用户体验。 ### jQuery Form 插件介绍 jQuery Form插件是基于jQuery的一个强大工具，它可以轻松地将任何HTML...

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    总结来说，从给定文件的内容来看，介绍了 JSON 数据格式的特性，jQuery 中处理 Ajax 请求的基本方式，以及如何通过 jQuery 的 `$.ajax()` 和 `$.getJSON()` 方法获取和处理 JSON 数据。同时，还通过实际的代码示例，...

    php基于jquery的ajax技术传递json数据简单实例.docx

    本文主要介绍了 PHP 基于 jQuery 的 Ajax 技术传递 JSON 数据方法，以完整实例形式分析了 PHP 基于 jQuery 的 Ajax 无刷新提交数据实现方法。下面是详细的知识点说明： HTML 页面 在 HTML 页面中，我们首先引入 ...

    使用jQuery读取xml和json的案例代码

    在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM...总的来说，jQuery使得在JavaScript中处理XML和JSON数据变得简单易行，大大提高了开发效率。理解并熟练运用这些技术，能让你在Web开发中更加得心应手。

    JQuery+AJAX处理XML数据

    在网页开发中，jQuery 和 AJAX 技术的结合是获取和操作服务器端数据的常见方式。本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML（可扩展标记语言）数据。 **1. jQuery 和 AJAX 简介** jQuery 是一个流行的...

    jquery与java交互通过json传递数据的经典实例

    在jQuery中，AJAX（异步JavaScript和XML）用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。虽然名称中含有XML，但实际应用中，JSON（JavaScript Object Notation）已经成为更常用的数据交换格式，...

    异步提交 表格异步提交

    这种技术允许用户在不刷新整个页面的情况下提交数据，从而实现页面的动态更新。这里我们将详细探讨异步提交的核心概念、工作原理以及如何使用Ajax进行表单异步提交。 ### 1. 异步提交简介 异步提交是基于HTTP的...

    struts2+jquery执行ajax并返回json类型数据（源码）

    在本示例中，Struts2将处理来自jQuery的Ajax请求，并返回JSON格式的响应数据。 jQuery则是一个轻量级的JavaScript库，简化了DOM操作、事件处理和Ajax交互。在本例中，jQuery的`$.ajax()`方法用于发起异步请求，获取...

    jquery+servlet 异步获取数据 并显示出来（很有收获的哦！）

    最后，将这个Servlet部署到服务器，比如Tomcat，当jQuery发起请求时，Servlet会接收到请求，处理后返回数据，jQuery的success回调函数接收到数据并更新页面，实现异步数据获取和显示。 总的来说，jQuery和Servlet的...

    jQuery实现异步获取json数据的2种方式

    在jQuery中，异步获取JSON数据主要有两种常用的方式，分别是$.getJSON()方法和$.ajax()方法。 首先，$.getJSON()是一个简化版的$.ajax()方法，专门用于请求JSON格式的数据。它返回一个Promise对象，这使得它可以...

    jQuery json创建投票系统_异步投票代码

    在IT行业中，jQuery和JSON是两个非常重要的技术概念，它们在网页开发，特别是前端交互方面起着关键作用。本文将详细解析如何利用jQuery和JSON来创建一个投票系统，并且会探讨异步投票代码的工作原理。 首先，jQuery...

    jquery异步方式请求

    3. **处理响应数据**：在回调函数中，如果服务器返回数据（`if(re)`），则进一步处理。数据通常为JSON格式，可以通过`eval(re)`将其转换为JavaScript对象，便于访问。 4. **构建和显示图像列表**：循环遍历返回的`...

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