2017-11-13 5 views
0

쿼리 문자열을 사용하여 한 페이지에서 다른 페이지로 데이터를 전달하려는 두 개의 HTML 페이지가 있습니다. 이 방법을 시도했지만 작동하지 않습니다. 문제가있는 사람이 누구든 도울 수 있습니다.쿼리 문자열을 사용하여 한 페이지에서 다른 페이지로 데이터 보내기

I 확인하기 버튼을 클릭

$(function() { 
 
    $("#btnQueryString").bind("click", function() { 
 

 
    var pack = document.getElementById('pack-val').value; 
 
    var info = document.getElementById('info').value; 
 

 
    var url = "packages-style-1.html?&pack=" + pack + "&download=" + info; 
 
    window.location.href = url; 
 
    }); 
 
    }); 
 

 
\t var queryString = new Array(); 
 
     $(function() { 
 
\t \t if (queryString.length == 0) { 
 
\t \t  if (window.location.search.split('?').length > 1) { 
 
\t \t  var params = window.location.search.split('?')[1].split('&'); 
 
\t \t  for (var i = 0; i < params.length; i++) { 
 
\t \t   var key = params[i].split('=')[0]; 
 
\t \t   var value = decodeURIComponent(params[i].split('=')[1]); 
 
\t \t    queryString[key] = value; 
 
\t \t  } 
 
\t  } 
 
    \t  } 
 
      if (queryString["pack"] != null && queryString["download"]) { 
 
       var data = "<u>Values from QueryString</u><br /><br />"; 
 
       pack += "<b>Pack:</b> " + queryString["pack"] + " <b>Download:</b> " + queryString["info"]; 
 
       $("#lblData").html(data); 
 
      } 
 
    \t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="at-intenet-package" id="pack"> 
 
    <thead></thead> 
 
\t <tbody> 
 
\t <tr> 
 
\t \t <td class="at-int-speedname" id="pack-val"> 
 
\t \t \t <h2 class="at-IntHdr">Value Pack</h2> 
 
\t \t \t <ul> 
 
\t \t \t <li><b>768Kbps</b> Download Speed</li> 
 
\t  \t   <li><b>384Kbps</b> Upload Speed</li> 
 
\t \t \t </ul> 
 
\t \t </td> 
 
\t \t <td class="at-int-dl1"> 
 
\t \t <h2 class="at-IntHdr">6.2<span class="time-sep">hrs</span></h2> 
 
\t \t \t <span class="todownload">to download*</span> 
 
\t \t </td> 
 
\t \t <td class="at-int-dl2"> 
 
\t \t <h2 class="at-IntHdr">55<span class="time-sep">min</span></h2> 
 
\t \t <span class="todownload">to download*</span> 
 
\t \t </td> 
 
\t \t <td class="at-int-dl3"> 
 
\t \t \t <h2 class="at-IntHdr">11<span class="time-sep">min</span></h2> 
 
\t \t \t <span class="todownload">to download*</span> 
 
\t \t </td> 
 
\t \t <td class="at-int-price" id="info"> 
 
\t \t \t <h2 class="at-IntHdr"><span>$</span>17.95<span class="per-month"> per mon*</span></h2> 
 
\t \t \t <span class="check-info">12 Month Pricing<br>No Contract Required<br>Equipment Priced Separately</span> 
 
\t \t </td> 
 
\t \t <td class="at-int-check"><a href="check.html" id="btnQueryString" class="at-int-btn dark-btn">Check Availability</a></td> 
 
\t \t </tr> 
 
    </tbody> 
 
    </table>
데이터는 다른 나는 단지 첫번째 원하는 페이지와 마지막으로 정보를 보낼 수 있습니다.

이미지 1 : enter image description here

이미지 2 : 전송 데이터 후/P O를 예상.

enter image description here

+0

이 방법을 사용하면'jquery/js'를 사용하여 페이지 전체에 값을 전달할 수 없습니다. 대신에 'localstorage'를 사용하십시오. –

+0

자세히 설명해주십시오. –

+0

'.value' 속성으로 어떻게 얻었습니까? 당신은''와 같은 폼 컨트롤을 가지고 있지 않습니다. 여러분의 코드는'info' 나'pack-val'에서 작동하지 않습니다. 두 번째 페이지로 전송할 실제 변수의 이름을 지정하십시오. * "이 방법을 시도했지만 작동하지 않습니다 ..."* 정확히 무엇을 시도했는지 설명하십시오. 내가보기에 HTML을 잘 맞추지 못하는 jQuery 붙여 넣기가 잘랐다. BTW,'queryString [ 'pack']'및'queryString [ 'info']'는 배열에 대해서는 잘못된 구문이지만 객체 리터럴에는 맞습니다. – zer00ne

답변

0

당신이 팩 - 발 및 정보 요소의 내용을 얻기 위해 노력하고있다가 나타납니다. 당신이하고있는 것처럼 window.location.href를 설정하는 한 쿼리 문자열 매개 변수를 다른 페이지로 보낼 수 있습니다. 그러나 pack-val 및 info 값은 항상 "정의되지 않음"이라고 생각합니다.

해당 요소의 HTML 콘텐츠를 다음 페이지로 보내시겠습니까? 그렇다면 내용을 이스케이프 처리하고 이스케이프 처리해야하므로 일반적으로 html 컨텐츠를 쿼리 문자열로 전달하는 것은 좋지 않습니다.

패키지 정보를 배열이나 변수에 저장하고 선택한 패키지 키를 앞뒤로 전달하는 것이 좋습니다.

+0

내 코드를 사용하여 어떻게 설명할까요? –

관련 문제