js中获取的json数据怎么展现在jsp页面上

别看美女了,我们是来学习的,哈哈哈!!!
大家周末好,作为小菜鸟的我,在上周的工作中遇到一个问题.在师傅的指点下解决了.现在我想总结一下,一来是巩固知识点,二来是分享给和我有通用困惑的小小伙伴;问题其实很简单,各位大神勿喷!!!

一.项目需求

在今天工作中,需要在首页展示手机靓号供客户选择.我是采用在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() {
			
		}
	
	}); 

至此,我们的问题就圆满解决了,希望能对和我一样对这里存在迷惑的伙伴们有所帮助;