使用Query String将数据从一个页面发送到另一个页面

时间:2017-11-13 07:28:14

标签: jquery

我有两个HTML页面,我想使用查询字符串将数据从一个页面传递到另一个页面。我尝试过这种方式,但它不起作用,任何人都可以帮忙解决问题。

$(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;
     });
  });

	var queryString = new Array();
        $(function () {
		  if (queryString.length == 0) {
		    if (window.location.search.split('?').length > 1) {
		       var params = window.location.search.split('?')[1].split('&');
		       for (var i = 0; i < params.length; i++) {
		         var key = params[i].split('=')[0];
		           var value = decodeURIComponent(params[i].split('=')[1]);
		            queryString[key] = value;
		     }
	       }
 	     }
            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);
            }
    	});
<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>
	<tbody>
	  <tr>
		<td class="at-int-speedname" id="pack-val">
			<h2 class="at-IntHdr">Value Pack</h2>
			<ul>
			<li><b>768Kbps</b> Download Speed</li>
	     	        <li><b>384Kbps</b> Upload Speed</li>
			</ul>
		 </td>
		 <td class="at-int-dl1">
		   <h2 class="at-IntHdr">6.2<span class="time-sep">hrs</span></h2>
			<span class="todownload">to download*</span>
		 </td>
		 <td class="at-int-dl2">
		   <h2 class="at-IntHdr">55<span class="time-sep">min</span></h2>
		   <span class="todownload">to download*</span>
		  </td>
		  <td class="at-int-dl3">
			<h2 class="at-IntHdr">11<span class="time-sep">min</span></h2>
			<span class="todownload">to download*</span>
		  </td>
		  <td class="at-int-price" id="info">
			 <h2 class="at-IntHdr"><span>$</span>17.95<span class="per-month"> per mon*</span></h2>
			<span class="check-info">12 Month Pricing<br>No Contract Required<br>Equipment Priced Separately</span>
		   </td>
		   <td class="at-int-check"><a href="check.html" id="btnQueryString" class="at-int-btn dark-btn">Check Availability</a></td>
		</tr>
    </tbody>
  </table>

当我点击检查可用性按钮时,数据发送到另一个页面,我只想要第一个和最后一个信息。

图片1: enter image description here

图2:发送数据后预期的o / p。

enter image description here

1 个答案:

答案 0 :(得分:0)

您似乎正在尝试获取pack-val和info元素的内容。只要您正在设置window.location.href,就可以像查询一样将查询字符串参数发送到另一个页面。但是,我相信你的pack-val和info的值总是&#34; undefined&#34;。

您是否尝试将这些元素的html内容发送到下一页?如果是这样,不建议您将需要转义和取消内容,并且通常将html内容作为查询字符串来回传递是不好的。

最好将包详细信息存储在数组或变量中,然后只来回传递选定的包密钥。