將多個變量（params）附加到url以獲得ajax調用

Question

我試圖將checked複選框的值附加到稍後用於ajax調用的url。如上所述，如果複選框被選中，我只想將值附加到url。如果用戶檢查並取消選中，則表示不會將該值添加到url。下面我有一些基本的基礎代碼。我怎樣才能追加多個項目的網址？

<form> 
<input type="checkbox" value="1" id="item1" /> 
<input type="checkbox" value="2" id="item2" /> 
<input type="checkbox" value="3" id="item3" /> 
<input type="submit" id="submitForm" value="Submit Form" /> 
<form> 

<script> 
$('#submitForm').click(function() { 
    $('checkbox').click(function() { 
    $.getJSON('www.mysite.com/mypage.php?id='+item1+item2+item3) 
    }); 
}); 
</script> 

Answer 1

首先給你的複選框一個特定的名字，如;

<form name="checkbox_form" id="checkbox_form"> 
    <input type="checkbox" value="1" id="item1" name="val1" /> 
    <input type="checkbox" value="2" id="item2" name="val2" /> 
    <input type="checkbox" value="3" id="item3" name="val3" /> 
    <input type="submit" id="submitForm" value="Submit Form" /> 
<form> 

而你的js會;

$('#submitForm').click(function() { 
    var url = "'www.mysite.com/mypage.php"; 
    if ($("#checkbox_form").serialize().length > 0) { 
     url += "?" + $("#checkbox_form").serialize();  
    } 
    alert("Your ajax url will be: " + url); 
    $.getJSON(url) 
}); 

這裏是工作提琴：http://jsfiddle.net/cubuzoa/UKV3r/2/

Answer 2

您可以使用jQuery方法序列化（）如下：

var query = $('form').serialize() 

後：

$.getJSON('www.mysite.com/mypage.php?'+query); 

只需要提供輸入字段屬性 「名」：

<form> 
<input type="checkbox" value="1" id="item1" name="item1"/> 
<input type="checkbox" value="2" id="item2" name="item2"/> 
<input type="checkbox" value="3" id="item3" name="item3"/> 
<input type="submit" id="submitForm" value="Submit Form" /> 
<form> 

而你得到：

www.mysite.com/mypage.php?item1=1&item2=2&item3=3 

如果選中所有複選框。