如何使用类名从多个项目中的内容使用 jQuery 构建 URL 查询字符串

Question

我正在尝试从页面上的内容构建一个可以在iframe中使用的URL。参数可以传入 URL 查询。

所以我希望建立一个像 http://www.example.com/iframe.aspx?title=&itemnum=& 这样的网址

另一个问题是有多个itemNum需要用逗号分隔，如Item1，Item2以及标题1，Title2等标题

这是一个 n00bular 的开始：

<div id="options">
<h2>Options</h2>
<div class="grid">
<div class="grid">
<div class="col">
<div class="box">
<span class="item-number">Item1</span>
<span class="title">Title1</span>
</div>
</div>
<div class="col">
<div class="box">
<span class="item-number">Item2</span>
<span class="title">Title2</span>
</div>
</div>
</div>
</div>
</div>
<script>
// Page Variables for iFrame URL
var itemNum = $('.item-number').html();
var itemTitle = $('.title').html();
// Build Params
var params = { itemnum:$itemNum, title:$itemTitle };
// Variable for full Query Strings
var mapQs = jQuery.param( params );
// Build Full URL root + query strings
$( "iframe" ).src ( 'http://www.blah.com/' + mapQs );
</script>

Answer 1

只需使用 jQuery .param( JSON ) 函数，它将连接对象并对它们进行 url 编码。

编辑：我已经更新了代码以满足OP的需求，我还将其内置到一个函数中，以便通过将选择器字符串保留在params对象中，代码看起来更干净一些。

我留下了注释来解释代码，但基本上它会循环遍历paramsjson 对象中的所有属性，然后将该属性设置为数组并将所有元素的内部 html 添加到该数组中

function makeIFrameURI(){
// Build Params
var params = {
"itemnum": '.item-number',
"title": '.title'
};
//loop through the properties of the params object
for(prop in params){
var selector = params[prop]; //get the selector
params[prop] = []; //equal blank array
$(selector).each(function(){
//add the individual element inner html into the 
params[prop].push($(this).html());
});
}
//loop through the properties of the params object
for(prop in params){
//make comma separated list
var tmp = params[prop].join(",");
params[prop] = tmp;
}
var queryString = '?' + $.param(params);
var myURI = 'http://www.blah.com/' + queryString;
return myURI;
}
var iframeURI = makeIFrameURI();
//$( "iframe" ).src ( iframeURI );
$('#result').html(iframeURI);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="options">
<h2>Options</h2>
<div class="grid">
<div class="grid">
<div class="col">
<div class="box">
<span class="item-number">Item1</span>
<span class="title">Title1</span>
</div>
</div>
<div class="col">
<div class="box">
<span class="item-number">Item2</span>
<span class="title">Title2</span>
</div>
</div>
</div>
</div>
</div>
<pre id="result"></pre>

编辑：我只是想提一下，jQuery函数$.params()会对参数进行编码，如果您将其用作URI，这是需要的。在几乎所有情况下，您都会使用参数服务器端，例如在PHP中。因此，在您使用它们的 PHP 页面上，您将使用$_GET[]检索值，这将自动解码这些值。所以在页面上，如果你在 PHP 中执行了这段代码 回声var_dump($_GET);

它将显示此值：

array(2) { ["itemnum"]=> string(11) "Item1,Item2" ["title"]=> string(13) "Title1,Title2" }