js中获取的json数据怎么展现在jsp页面上(SSM框架)

来源：https://blog.csdn.net/Milogenius/article/details/78700248

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

        }

    });