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

最新推荐文章于 2024-08-30 14:13:47 发布
最新推荐文章于 2024-08-30 14:13:47 发布
阅读量117 收藏
点赞数
分类专栏： JQuery 文章标签： json XML jQuery 数据结构 Ajax ViewUI
最近在项目中用到Jquery，感觉真的不错，开源的插件也比较多。
项目中，我随手记录一些常用的方法。也是刚刚学习，有问题大家一起讨论，
希望能留下宝贵意见！
首先，在JQuery中AJAX请求一般有
$.post(url,data,callback) $.get(url,data,callback)
$.ajax (options)...
以post为例JSON数据处理方式：
[img]/upload/attachment/87362/7483e332-1e89-3d85-b388-315874f25327.jpg[/img]
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处理方式：
[img]/upload/attachment/87366/883e9bad-9411-3bb6-8d13-f9d46cdb261b.jpg[/img]
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;
    }


未完待续...
coffeeyao888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现异步获取json数据的2种方式
10-25
在jQuery中，异步获取JSON数据主要有两种常用的方式，分别是$.getJSON()方法和$.ajax()方法。 首先，$.getJSON()是一个简化版的$.ajax()方法，专门用于请求JSON格式的数据。它返回一个Promise对象，这使得它可以...
jquery解析JSON数据,异步请求,快速准确处理
u011277123的博客
11-10 1120
乡里亲 2016-11-08 08:50 相信很多朋友在做项目时，会遇到JSON数据处理，而现在对JSON数据的应用也是十分普遍，特别在不同的项中采用同一数据源时，JSON数据的传递更易于理解与使用。 那么用jquery解析JSON数据的方法,作为异步请求的传输对象，jquery异步请求后返回json对象,这里考虑的是服务器返回JSON形式的字符串形式，对于利用JSONObject等插件封装的
Ajax实现异步操作实例_针对XML格式的请求数据
weixin_30721077的博客
07-13 74
js分类中有一节【原生js异步请求,XML解析】主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析，今天我将用一个实例来说明具体要如何操作. 前台的参数类型也是XML使用的是jquery： function test(){ var xmlString ="<bookstore>"+ "&...
jquery xml数据转换为html,JQuery的ajax获取数据后的处理总结(html,xml,json)
weixin_42579969的博客
05-31 236
JQuery的ajax获取数据后的处理总结(html,xml,json)1、html处理比较简单，直接输出即可。一般用$("jb51div").innerHTML等即可2、json格式数据调用复制代码 代码如下:$.ajax({url : "/trundle/RawContentAction.getAjaxContent.act",data : "param1=22",dataType : "js...
jQuery方式ajax post异步提交json类型数据到后台servlet（前台不刷新）
smx6666668的博客
04-05 1580
用途：点赞功能等需要异步提交的地方，不刷新当前页面 HTML <div> <span id="test" >测试</span> <input id="num1" value="123456"> </div> JavaScript（jQuery方式ajax post）同时也可获取当前页面其他标签的值放入json，不需要获取后台返回结果 <script src="js/jquery.min.js"></script>
详谈 Jquery Ajax异步处理Json数据.
01-19
所谓的Ajax.... } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类. 但都返回Json格式
jQuery解析返回的xml和json方法详解
10-20
在JavaScript和前端开发中，jQuery库提供了一种方便的方式来处理XML和JSON数据，尤其是在与服务器进行异步交互（Ajax）时。本篇文章将详细介绍如何使用jQuery解析从服务器返回的XML和JSON数据。 首先，让我们来看...
JQuery前端操作JSON
xiaoweids的博客
07-19 2308
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。...
AJAX（异步的javaScript和xml）
__盛某人的博客
03-04 1097
ajax创建交互式网页开发技术 用js通过http协议想服务器发送xml数据，目前更流行使用json AJAX最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网络内容 优点 AJAX使用Javascript技术向服务器发送异步请求 AJAX无须刷新整个页面 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高 缺点 AJAX并不适合所有...
ajax的基本使用(xml和json)
weixin_43555093的博客
07-09 844
1.什么是ajax 　　Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax=异步JavaScript和XML(标准通用标记语言的子集).通过后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某个部分进行更新(无刷新技术)....
web前端-json数据与Ajax异步交互
weixin_44142032的博客
03-05 1403
前言---加油，ajax和json总结终于完成，每天都要坚持！如有不足或错误之处，还请大家多多纠正，谢谢 json数据 目录 Ajax技术 程序员老黄历案例 数据交换格式： json xml 什么是JSON: javascript对象表示法，是存储和交换信息的语法，类似xml，比xml更小更易解析 json对象...
jquery将xml转换成html,JQuery解析HTML、JSON和XML实例详解
weixin_31865445的博客
05-31 211
1、HTML有的时候会将一段HTML片段保存在HTML文件中，在另外的主页面直接读取该HTML文件，然后解析里面的HTML代码片段融入到主页面中。fragment.html文件，其内容：hello Jquery在主页面Test.html中解析代码$("#a1").click(function(){$("#div2").load('fragment.html');return false;});[c...
jQuery +ajax提交json数据
热门推荐
清风自来
06-17 7万+
首先，很多网站开发都会采用jQuery ，简化了js的代码，是开发更方便，因此我也开始使用jQuery。。。。 如果不知道如何在js中使用jQuery请移步这里 在jQuery中封装有$.ajax方法可以直接来调用 如果对于Ajax方法不了解请可以查看这里有各个参数的介绍 如果要使用json需要下载json的jar包及其依赖包 很多网站上都有，可自行百度 提供一个网址 //提交jso...
ajax实现异步请求的json方式；
AerfaGo的博客
09-27 1235
一、ajax：(asynchronous javascript and xml)异步的javascript和xml 二、JSON:1、作用: json是javascript提供的一种数据交换格式。 2、语法: { 属性名 : 值 ，属性名 : 值 , 属性名 : 值 , ……} 本质就是js的自定义对象 3、细节: 1>{ }其实就是javascr
uni-cli 编译和打包并自动打开微信开发者工具
weixin_41104307的博客
08-26 275
需求：平时使用uni-cli开发，是为了获得vscode更好的提到提示以及其他的便捷工具以及提升效率；带有一个缺点，那便是 uni-cli 编译之后，你需要手动打开 微信开发者工具，找到项目下的 dist/dev/mp-weixin 或者 dist/build/mp-weixin。这可能需要花费你几秒中的时间，粗看没啥，细算就很浪费。特别是打完包，还要关闭之前的dev项目,找到build项目 发包；这有的还费 预计10秒 -- 因此，作为懒人的我，决定去偷个懒。
springboot面试题——简化提纯版-备战春招，秋招
weixin_64942806的博客
08-26 806
springboot简化提纯版
鸿蒙Next 单元测试框架——hypium
最新发布
qq_39431405的博客
08-30 557
单元测试框架(hypium)是HarmonyOS上的测试框架，提供测试用例编写、执行、结果显示能力，用于测试系统或应用接口。表1 单元测试框架功能特性。
前端通过draggable结合fabricjs实现拖拽至画布生成元素自定义编排功能
m0_52313178的博客
08-26 1068
前端通过draggable结合fabricjs实现拖拽自定义编排功能 太久没有更新了，主要最近行情不太好失业了一段时间，一度到怀疑人生，然后就是做的东西大多没有什么含金量，没什么好分享的就很尴尬。 刚好最近遇到一个奇葩的需求，一个基地管理的需求，由于项目中的基地很偏，地图上都定位不到，只能通过一个图片作为底图，然后在上面绘制一些图层，需要做一个自定义编排的需求，先上图: 上面是实现的demo，首先上html结构代码（技术栈：V3+TS+elementplus） <div class="massif-
jQuery异步通信实战：JSON数据传输与简单示例
本篇文章主要介绍了如何使用jQuery库实现异步通信，特别是通过JSON数据进行传递。jQuery作为流行的JavaScript库，提供了简化开发的API，强调“写更少，做更多”。文章首先强调了引入jQuery库的重要性，推荐读者从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值