Question

我有一个网址链接：

http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4

参数是动态的，因此它不是静态数字。在我的例子中是4，但可能更少或更多。
我有一个预先选择下拉列表的jquery代码：

jQuery(document).ready(function( $ ) {
    $("#var_one").val("result1");  
});

现在我想根据上面的url参数填充jquery代码，如：

jQuery(document).ready(function( $ ) {
    $("#var_one").val("result1"); 
    $("#var_two").val("result2"); 
    $("#var_three").val("result3"); 
    .
    .
    .
});

Answer 1

这是一个检索URL参数的函数：

SELECT colC,colE 
FROM T1 LEFT JOIN (SELECT colD,colE FROM T2) ON colA=colD
WHERE colB=1

如果您指定参数，例如function GetURLParameter(sParam) { if (sParam != undefined && sParam.length > 0) { var sPageHref = window.location.href; var sPageURL = window.location.search.substring(1); var sURLVariables = (sPageURL.length != '') ? sPageURL.split('&') : sPageHref.split('&'); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } } else { var sPageURL = document.location.pathname.split('&'); var sParameterName = sPageURL[0]; return sParameterName; } }，则会获取该参数。如果您只使用GetURLParameter('something')，则会获取所使用的链接，即GetURLParameter()或其他。

Answer 2

使用正则表达式根据网址形成一个键值对数组，并使用forEach循环遍历数组，并使用.text()

将值添加到ID

希望这有帮助！

var a = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4"

var query = a.split('?')[1] //extract query param
var queries = query.split(/&/g) //extract key value pairs from query param
queries.forEach(function(el){ //loop through the key value pair
  var newElm = '<div id="' + el.split('=')[0] + '">'+el.split('=')[1]+'</div>' //create new elm
  $('body').append(newElm) //append into DOM Body
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

更新：正确回答您的问题，因为我知道您需要将网址参数转换为JSON，然后使用for循环并使用键，值来填充输入值。因此输入和值是动态的。

$(document).ready(function() {

  String.prototype.allParams = function() {
    return JSON.parse('{"' + decodeURI(this.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
  }


  var url = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4";
  //var url = location.href
  var params = url.allParams();

  for (var k in params) {
    if ($("#" + k).length) $("#" + k).val(params[k]);
    //if input id not exist append to body or any container
    //you can remove next line
    else $("body").append("<input value='" + params[k] + "'/>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

尝试使用此原型url.param("param");获取参数值。

String.prototype.param = function(str) {
  e = this.indexOf("?" + str + "=") > -1 ? "?" + str + "=" : "&" + str + "=";
  return this.indexOf(e) == -1 ? undefined : this.split(e)[1].split("&")[0];
}

var url = "http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4";

console.log(url.param("var_one")); //result1

console.log(location.href.param("param")); //undefined

使用jquery选择URL参数并将其添加到脚本中

3 个答案: