1. 程式人生 > >jq、js獲取一個頁面中的ajax資料,傳到另一個頁面顯示(通過url傳參方式)

jq、js獲取一個頁面中的ajax資料,傳到另一個頁面顯示(通過url傳參方式)

做專案遇到了頁面之間傳輸資料的問題,特別是第一個頁面的資料是使用ajax顯示的,當點選ajax中append的li的時候,開啟另一個頁面,將第一個頁面的資料顯示在另一個頁面上,具體情況如下:

一、這是第一個頁面中的js程式碼:
//顯示所有該使用者的歌單
function showMusicMenu(){
    var uid = $(".user").attr("id");//獲取頁面該行的id
    $.ajax({
         url: 'mm/getAllMusicMenuByUid.do?uid='+uid,
         type:'post',
         async: false,//設定為同步
         dataType:'json',
         success:function (r) {
            var mlist = r.mmlist;
            for (var i = 0; i < mlist.length; i++) {
                var time = timestampToTime(mlist[i].mm_time.time);
                //迴圈顯示相應的音單
                 $(".mmenu").append("<li id='"+mlist[i].mm_id+"'

onclick='jump(this)' >"+
                                        "<img src='img/index/lazy_load.png' alt='"+mlist[i].mm_name+"'  title='"+mlist[i].mm_name+"'/>"+
                                        "<div class='menuname'>"+mlist[i].mm_name+"</div>"+
                                        "<span class='jianjie' style='display:none;'>"+mlist[i].mm_summary+"</span>"+
                                        "<span class='ctime' style='display:none;'>"+time+"</span>"+
                                    "</li>");  
            }
            getmmimgBymm_id();//顯示所有該使用者的歌單上最新封面
         }
    });
}

單擊li後實現跳轉

function jump(e){

//取到該li的資料
    var mmid = $(e).attr("id");
    var img = $(e).find("img").attr("src");
    var name = $(e).find("img").attr("title");
    var time = $(e).find("span").eq(1).html();
    var jianjie = $(e).find("span").eq(0).html();
    //將資料拼接到這個頁面的url中進行傳參,跳轉頁面
     location.href='music_menu.jsp?mmid='+mmid+'&img=' + encodeURI(img)+'&name=' + encodeURI(name)+'&time=' + encodeURI(time)+'&jianjie=' + encodeURI(jianjie);

}

二、這是第二個頁面的js資料,即跳轉之後的頁面資料


//獲取url中的引數,這是一個獲取url引數的方法
function GetRequest(){
    var url = location.search; //獲取url中"?"符後的字串  
    var theRequest = new Object();  
    if (url.indexOf("?") != -1) {  
        var str = url.substr(1);  
        strs = str.split("&");  
        //擷取&後迴圈
        for (var i = 0; i < strs.length; i++) {  
            theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);  //decodeURI()解決中文亂碼
        }  
    }  
    return theRequest;

}

然後,通過上面那個方法,獲取引數,並顯示在頁面上

//顯示歌單列表
function showList(){
    var request = new Object();  
        request = GetRequest(); //取到傳過來的資料
        var mmid = request['mmid'];  //歌單id
        var img = request['img'];  //圖片地址
        var name = request['name'];  //歌單名稱
        var time = request['time'];  //建立時間
        var jianjie = request['jianjie'];  //簡介

        //顯示歌單資訊
      $(".music1_left a .m_1").attr("src",img);
      $(".music1_left ul li").eq(0).html(name);
      $(".music1_left ul li").eq(2).append(time);
      $(".music1_left ul li").eq(4).append(jianjie);

}

 

結束:這個方法雖然能顯示資料出來,但是引數過多,url位址列中就會有很長的一串引數顯示,誰有更好的方法,那麻煩大家多多關照~