使用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從簡單字段生成查詢字符串？

回答

相關問題