js中获取的json数据怎么展现在jsp页面上
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
别看美女了,我们是来学习的,哈哈哈!!!
大家周末好,作为小菜鸟的我,在上周的工作中遇到一个问题.在师傅的指点下解决了.现在我想总结一下,一来是巩固知识点,二来是分享给和我有通用困惑的小小伙伴;问题其实很简单,各位大神勿喷!!!
一.项目需求
在今天工作中,需要在首页展示手机靓号供客户选择.我是采用在js中发起ajax请求去后台调用接口返回数据,然后在ajax返回的结果集中获取数据,进而展示到jsp页面中;
效果图:
二.思路分析
我们的新项目是采用ssm框架搭建,在首页对应的js中发起ajax请求(简写引入问题)
$.ajax({
success : function(result){
});
我们知道,ajax返回的数据存在于result,那么我们如何将取出到数据返回的jsp页面那?这是我们接下来要探讨的问题;
三,解决方案
eg:代表任意名称,下同
1.创建首页.jsp页面,写好相关html代码;
2.创建于首页对应的*.js文件,写好相关的js代码,将js文件通过<script>
标签引入jsp文件;
3.在*.js中发起ajax请求获取满足靓号规则的手机号码;
$.ajax({
data : {
"phoneNoNums" : "12" //号码数量
},
url:"自定义_对应自己controller中定义的路径",
dataType:"json",
success : function(result){
});
4.在controller中封装方法来处理ajax请求;
resultMap.put("phoneNos",JSONArray.toJSON(canChoosePhoneNums));
result.setResultObj(resultMap);
在具体的项目中,会有不同的业务逻辑,这里不做赘述,我们关注到后台给我们返回的是json对象;
5.(重点)将ajax请求的数据返回到jsp页面展示出来
首先,我们来看一下jsp页面的设计:
<table class="ljxh-table">
</table>
在首页jsp页面,我们定义<table>
来展示我们的数据;
其次,我们来看看如何将ajax请求的数据展示到定义好的<table>
中;
$.ajax({
data : {
"phoneNoNums" : "12" //请求的手机号码
},
url:"自定义_对应自己controller中定义的路径",
dataType:"json",
success : function(result){
var showMess = result.resultMsg;//失败提示消息
if(!showMess){
showMess = "系统忙,请稍后重试";
}
if((result.resultCode * 1) == 0){
//获取可售的手机号码
var strHtml = "";
var phoneNos = result.resultObj.phoneNos;
if(phoneNos.length > 0){
for (var i = 0; i < phoneNos.length; i++) {
var phoneNum = phoneNos[i].phoneNum;
if(i % 2 == 0){
//手机号码共12个,分6行2列
strHtml += "<tr>"
}
//从效果图可以看出,靓号展示后三位或后四位,不确定,这里是获取靓号匹配规则的长度(减1因为靓号匹配规则默认以*开头)
var rule1 = phoneNos[i].noRule.length -1;
strHtml += "<td>" + phoneNum.substring(0, 11-rule1) + "<span>" + phoneNum.substring(11-rule1, 12) + "</span></td>"
if(i % 2 == 1){
strHtml += "</tr>"
}
}
}else{
strHtml+="<tr><td colspan='2'>暂无靓号数据</td></tr>";
}
$('.ljxh-table').html(strHtml);
}
},
error : function() {
}
});
至此,我们的问题就圆满解决了,希望能对和我一样对这里存在迷惑的伙伴们有所帮助;
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
3 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)