`
uule
  • 浏览: 6358861 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

不借助中间页面实现JSON数据的接收

    博客分类:
  • JSON
阅读更多

上代码:

markuplayer1.jsp:

function doTrClick(id,index){				
		var url = "<%=basePath%>markuplayer1.do?method=read";
		var pars = "id=" + id;
		var ajax = new Ajax.Request(
			 url,
			{method:'post',parameters:pars,onComplete:checkreq}
	        ); 
	}

 

function checkreq(request){
  		var info = request.responseText; 
		var info2 = eval('('+info+')'); 
		var re = info2.msg;
 		
		if(re == "success"){
			g_countryArray = info2.countryArr;	//注意地方	sendJSON中填充的数据  
			openChild("<%=basePath%>master/markuplayer/markuplayer1Details.jsp",750,380);
		}
	}

 Java页面处理:

 

String countryCodes = markuplayer1.getCountrycode();
		JSONArray countriesArray = new JSONArray();
		//set countrycodes to json array
		if(countryCodes != null && !"".equals(countryCodes)) {
			String[] countryArray = countryCodes.split(",");
			if(countryArray.length > 0) {
				List<Countries> countries = (List<Countries>)request.getSession().getServletContext().getAttribute(MyConstants.COUNTRIES_KEY);	
				for(String countrycode : countryArray) {
					for(Countries country : countries) {
						if(countrycode.trim().equalsIgnoreCase(country.getCountrycode().trim())) {
							JSONObject json = new JSONObject();
							json.put("code", country.getCountrycode().trim());
							json.put("countrynameEn", country.getCountrynameEn());
							json.put("countrynameCn", country.getCountrynameCn());
							json.put("countrynameTw", country.getCountrynameTw());
							countriesArray.add(json);
						}
					}
				}
			}
		}

JSONUtils.sendJSON(response, "success",countriesArray);

 关键部分:

public static void sendJSON(HttpServletResponse response,String message, JSONArray countrycontent) {
		response.setContentType("application/json");
		response.setCharacterEncoding("utf-8");
		PrintWriter outResponse = null;
		try {
			outResponse = response.getWriter();

			JSONObject jsonObject = new JSONObject();
			jsonObject.put("msg", message);
			jsonObject.put("countryArr", countrycontent);

			outResponse.print(jsonObject.toString());
			outResponse.flush();
		} catch (IOException e) {
			log.error("json utils exception :" + e);
		} finally {
			if(outResponse != null) {
				outResponse.close();
			}
		}
	}

 这样jsp页面就可以接收到JSONArray类型的countryArr,至此结束!

 

扩展:

markuplayer1Detail.jsp使用JSONArray类型的数据:

 var g_countryList =  [] ;
wwindow.onload = changeToReservations;
	 	function changeToReservations(){
			g_countryList = window.parent.g_countryArray;			
		}

 点Edit弹出一个页面并利用接收到的JSONArray类型来填充数据:

<span id="genCountryList" onmouseover='this.style.cursor="pointer";' onClick="genCountryListTable('idCountryList');">
										Edit	
									</span>
 
var g_countryList  = [];
function genCountryListTable( id ) {
	  			  			
			var obj = document.getElementById(id);
			if(obj) {
	  			obj.style.display = '';
	  		}
	  		
			var sCountryTable        = [];
			sCountryTable[sCountryTable.length] = "<table style='width:100%;font-size: 11px;'>";
			
			for (var i=0; i<g_countryList.length; i++)	{		
				sCountryTable[sCountryTable.length] = '<tr id="tr_'+i+'" onmouseover="domouseOver(this);" onmouseout="domouseOut(this);">';			
				sCountryTable[sCountryTable.length] = '<td style="text-align:center;">' + g_countryList[i].code + '</td>';
				sCountryTable[sCountryTable.length] = '<td>' + g_countryList[i].countrynameEn + '</td>';
				sCountryTable[sCountryTable.length] = '<td>' + g_countryList[i].countrynameCn + '</td>';
				sCountryTable[sCountryTable.length] = '<td>' + g_countryList[i].countrynameTw + '</td>';
				sCountryTable[sCountryTable.length] = '<td><a onmouseover="this.style.cursor=\'pointer\'; this.style.fontWeight=\'normal\'; this.style.color=\'white\';" onmouseout="this.style.color=\'black\'; this.style.fontWeight=\'normal\';" onclick="removeCountryCode(\''+g_countryList[i].code+'\',\'' + i + '\');">Remove</a></td>';
				sCountryTable[sCountryTable.length] = '</tr>';
			} 	
			sCountryTable.push('</table>');
			$('idCountryListContent').innerHTML = sCountryTable.join("");
	  	} 

 弹出窗口代码(省略CSS,关键):

<!-- hidden panel of details of country list -->
					<div id="idCountryList" style="display: none;">
						<div id="idCountryListHandle">
							 <a href="javascript:;" id="close" name="close" onClick="closePanel('idCountryList')">[ x ]</a> 
		            		List of selected country
						</div>					
						<table style="border:0px solid red;width:100%;font-size: 11px;">
							<tr style="font-weight:900;">
								<td style="width:20%">Country Code</td>
								<td style="width:20%">Country name (EN)</td>
								<td style="width:20%">Country name (CN)</td>
								<td style="width:20%">Country name (TW)</td>
								<td style="width:20%">Operation</td>
							</tr>
						</table>				
						<div id="idCountryListContent"></div>
					</div>
 

效果图:

 


 

  • 大小: 26 KB
分享到:
评论

相关推荐

    Ajax结合webService实现的无刷新幻灯片源码

    在这个系统中,Web Service接收Ajax请求,根据需求查询数据库,获取新的幻灯片信息,然后以XML或者JSON格式返回数据给前端。 3. **无刷新更新**:通过Ajax调用Web Service,前端可以在不刷新整个页面的情况下,仅...

    Java后端生成echarts图片

    在Java后端,我们不能直接执行JavaScript,因此需要一个中间步骤,即在服务器端生成JSON配置,然后将其转换为图片。 1. **ECharts配置**:在Java后端,我们可以创建一个JSON对象来模拟ECharts的配置项。这包括图表...

    JS跨域取XML--借助AS的URLLoader

    JSONP(JSON with Padding)是一种解决跨域请求的技术,它依赖于script标签不受同源策略限制的特点,通过动态创建script标签的方式请求跨域数据。JSONP仅支持GET请求,并且需要服务端支持JSONP回调函数。 知识点三...

    Flex程序如何获取html容器传递的URL参数值

    因此,需要借助JavaScript作为中间层来读取这些参数。JavaScript可以通过`window.location`对象获取当前页面的URL,然后解析出参数部分。例如,使用`window.location.search.substring(1)`可以获取URL中`?`符号后的...

    java网页聊天室可运行

    Ajax技术也可能被用到,以便在不刷新整个页面的情况下更新聊天内容。 6. **安全性**:为了保护用户信息的安全,项目可能会使用HTTPS协议来加密数据传输,防止中间人攻击。同时,密码可能经过哈希和盐值处理,增加...

    自己开发的JAVA Web Email邮件系统

    AJAX技术可以实现页面无刷新的交互,提高用户体验。 7. **邮件处理**:邮件内容可能包含附件,需要处理MIME(多用途互联网邮件扩展)格式,以正确解析和显示不同类型的附件。 8. **性能优化**:为了处理大量邮件,...

    在线求职管理系统

    这涉及到用户认证(验证身份)和授权(确定权限范围),可能使用session或者JWT(JSON Web Tokens)来实现。 9. **邮件服务**: 当雇主接收或拒绝求职申请时,系统可能通过邮件服务通知求职者,这需要集成SMTP...

    ChatOnlineDemo

    9. **实时消息更新**:为了实现实时消息显示,前端需要监听服务器推送的消息,并将新消息动态添加到聊天界面,这可能需要借助于前端状态管理库如Redux或Vuex。 10. **性能优化**:为了提供流畅的用户体验,需要考虑...

    如何将JS的变量值传递给ASP变量

    在AJAX中,JavaScript可以向服务器发送异步请求,获取数据后在不刷新页面的情况下更新页面内容。这通常通过`XMLHttpRequest`对象或`fetch` API来实现。在ASP中,可以使用ASP的内置对象和方法来响应这些AJAX请求并...

    Android快捷支付

    2. **签名验证**:支付平台通常会提供签名机制,用于验证数据的完整性和防止中间人攻击。 3. **更新SDK**:定期检查并更新SDK,以获取最新的安全补丁和功能改进。 总结来说,Android三方支付集成是一个涉及多个步骤...

    Pokemon-App

    这些API允许我们在不借助服务器的情况下保存用户数据。 5. **响应式设计**:考虑到不同设备的屏幕尺寸,我们需要采用响应式设计,确保应用在手机、平板和桌面电脑上都能良好显示。这可以通过 CSS 的媒体查询(Media...

    pwa_example

    Service Worker可以在后台运行,拦截网络请求,缓存资源,使得即使在没有网络的情况下,用户仍能访问之前加载过的页面和数据。 2. **即时加载**:利用Web App Manifest文件,PWA可以定义应用的图标、主题色、启动...

    pwa-demo:一个网络应用程序演示,使用权重

    它通过一系列技术,如Service Worker、Web App Manifest和IndexedDB,使网页应用能够离线工作、接收推送通知,并可以被添加到用户的主屏幕,实现类似传统桌面应用的功能。 **Service Worker** Service Worker是PWA...

    pwa-intro

    2. **Web App Manifest**:这是一个JSON文件,包含了应用的元数据,如应用名称、图标、启动屏幕设置等,用于定义PWA在主屏幕上的展示方式。 3. **HTTPS**:为了确保数据安全和防止中间人攻击,PWA必须通过安全的...

Global site tag (gtag.js) - Google Analytics