将多个变量（参数）附加到 ajax 调用的 url答案

【问题标题】：Append multiple variables(params) to url for ajax call将多个变量（参数）附加到 ajax 调用的 url
【发布时间】：2014-02-20 20:08:04
【问题描述】：

我正在尝试将 checked 复选框中的值附加到稍后将用于 ajax 调用的 url。如前所述，如果选中复选框，我只想将值附加到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>

【问题讨论】：

使用这个：api.jquery.com/serialize

标签： javascript jquery ajax

【解决方案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/

【讨论】：

【解决方案2】：

你可以使用JQuery方法serialize()如下：

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

如果所有复选框都被选中。

【讨论】：