別看美女了,我們是來學習的,哈哈哈!!!!
大家週末好,作為小菜鳥的我,在上週的工作中遇到一個問題.在師傅的指點下解決了.現在我想總結一下,一來是鞏固知識點,二來是分享給和我有通用困惑的小小夥伴;問題其實很簡單,各位大神勿噴!!!

一.專案需求
在今天工作中,需要在首頁展示手機靚號供客戶選擇.我是採用在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頁面展示出來;

<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() {

        }

    }); 

至此,我們的問題就圓滿解決了,希望能對和我一樣對這裡存在迷惑的夥伴們有所幫助;