上代码:
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
分享到:
相关推荐
在这个系统中,Web Service接收Ajax请求,根据需求查询数据库,获取新的幻灯片信息,然后以XML或者JSON格式返回数据给前端。 3. **无刷新更新**:通过Ajax调用Web Service,前端可以在不刷新整个页面的情况下,仅...
在Java后端,我们不能直接执行JavaScript,因此需要一个中间步骤,即在服务器端生成JSON配置,然后将其转换为图片。 1. **ECharts配置**:在Java后端,我们可以创建一个JSON对象来模拟ECharts的配置项。这包括图表...
JSONP(JSON with Padding)是一种解决跨域请求的技术,它依赖于script标签不受同源策略限制的特点,通过动态创建script标签的方式请求跨域数据。JSONP仅支持GET请求,并且需要服务端支持JSONP回调函数。 知识点三...
因此,需要借助JavaScript作为中间层来读取这些参数。JavaScript可以通过`window.location`对象获取当前页面的URL,然后解析出参数部分。例如,使用`window.location.search.substring(1)`可以获取URL中`?`符号后的...
Ajax技术也可能被用到,以便在不刷新整个页面的情况下更新聊天内容。 6. **安全性**:为了保护用户信息的安全,项目可能会使用HTTPS协议来加密数据传输,防止中间人攻击。同时,密码可能经过哈希和盐值处理,增加...
AJAX技术可以实现页面无刷新的交互,提高用户体验。 7. **邮件处理**:邮件内容可能包含附件,需要处理MIME(多用途互联网邮件扩展)格式,以正确解析和显示不同类型的附件。 8. **性能优化**:为了处理大量邮件,...
这涉及到用户认证(验证身份)和授权(确定权限范围),可能使用session或者JWT(JSON Web Tokens)来实现。 9. **邮件服务**: 当雇主接收或拒绝求职申请时,系统可能通过邮件服务通知求职者,这需要集成SMTP...
9. **实时消息更新**:为了实现实时消息显示,前端需要监听服务器推送的消息,并将新消息动态添加到聊天界面,这可能需要借助于前端状态管理库如Redux或Vuex。 10. **性能优化**:为了提供流畅的用户体验,需要考虑...
在AJAX中,JavaScript可以向服务器发送异步请求,获取数据后在不刷新页面的情况下更新页面内容。这通常通过`XMLHttpRequest`对象或`fetch` API来实现。在ASP中,可以使用ASP的内置对象和方法来响应这些AJAX请求并...
2. **签名验证**:支付平台通常会提供签名机制,用于验证数据的完整性和防止中间人攻击。 3. **更新SDK**:定期检查并更新SDK,以获取最新的安全补丁和功能改进。 总结来说,Android三方支付集成是一个涉及多个步骤...
这些API允许我们在不借助服务器的情况下保存用户数据。 5. **响应式设计**:考虑到不同设备的屏幕尺寸,我们需要采用响应式设计,确保应用在手机、平板和桌面电脑上都能良好显示。这可以通过 CSS 的媒体查询(Media...
Service Worker可以在后台运行,拦截网络请求,缓存资源,使得即使在没有网络的情况下,用户仍能访问之前加载过的页面和数据。 2. **即时加载**:利用Web App Manifest文件,PWA可以定义应用的图标、主题色、启动...
它通过一系列技术,如Service Worker、Web App Manifest和IndexedDB,使网页应用能够离线工作、接收推送通知,并可以被添加到用户的主屏幕,实现类似传统桌面应用的功能。 **Service Worker** Service Worker是PWA...
2. **Web App Manifest**:这是一个JSON文件,包含了应用的元数据,如应用名称、图标、启动屏幕设置等,用于定义PWA在主屏幕上的展示方式。 3. **HTTPS**:为了确保数据安全和防止中间人攻击,PWA必须通过安全的...