使用jQuery从简单字段生成查询字符串？

我有一些非常简单的字段，比如是/否的复选框以及一些宽度/高度的文本输入等。使用jQuery从简单字段生成查询字符串？

我想要用户选中一个功能框并定义它们的大小，所以如果他们检查<input type="checkbox" id="header" name="header" value="true" />那么我想将&show_header=true添加到查询字符串。

我有一个非常basic fiddle set up，但我似乎无法让它正常工作。就像，如果您选中该复选框，然后填入值，但取消选中该复选框，它开始重复的东西，我结束了&show_header=true&show_header=true&show_header=true&show_header=true&show_header=true

来源

2012-11-30 Xhynk

只是给输入姓名'show_header'和使用'连载（）'... http://api.jquery.com/serialize – ahren

感谢您的链接 - 我没有意识到这一点！ :) – Xhynk

您可以简单地使用serialize()方法：

function displayVals() { 
    $("code").html(function(i, val) { 
     var query = $("input").serialize(); 
     return "http://...?method=review_box&amp;" + query; 
    }); 
}

DEMO ：http://jsfiddle.net/AYQyB/4/

来源

2012-11-30 22:50:00 VisioN

yuppp，这是'+ 1' – ahren

太棒了！谢谢！我会接受它时，让我:) :) – Xhynk

@Shortbus不客气:) – VisioN

它看起来像你试图重塑jQuery's .serialize()函数。

<form> 
    <div><input type="text" name="a" value="1" id="a" /></div> 
    <div><input type="text" name="b" value="2" id="b" /></div> 
    <div><input type="hidden" name="c" value="3" id="c" /></div> 
    <div> 
     <textarea name="d" rows="8" cols="40">4</textarea> 
    </div> 
    <div><select name="e"> 
     <option value="5" selected="selected">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
    </select></div> 
    <div> 
     <input type="checkbox" name="f" value="8" id="f" /> 
    </div> 
    <div> 
     <input type="submit" name="g" value="Submit" id="g" /> 
    </div> 
</form>

的jQuery：

$('form').submit(function() { 
    alert($(this).serialize()); 
    return false; 
});

产地：

a=1&b=2&c=3&d=4&e=5

来源

2012-11-30 22:53:00

也许是这样？

<input class="my-vars" type="checkbox" name="rbshowheader" id="rbshowheader" value="true" /> 
<input class="my-vars" type="text" name="rbwidth" id="rbwidth_id" value="" /> 
<pre><code>http://yoursite.whirlocal.com?method=review_box</code><span id="query"></span></pre>

和JavaScript

$(function() { 
    $('.my-vars').change(function() { 
    var sQuery = $('.my-vars').serialize(); 
    $('#query').html('&'+sQuery); 
    }); 
});

来源

2012-11-30 23:08:50 pawella

使用jQuery从简单字段生成查询字符串？

回答

相关问题