Javascript 如何使用ajax传递多个值？

我希望通过ajax传递多个值

我的代码：

$(".ajax-button").change(function(event){

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        $.ajax({
            url:'{{action("WebshopController@refreshCheckout")}}' ,
            data: {
                frame: $('input.frame:checked').val(),
                color: $('input.color:checked').val()
            },
            method: 'GET'
        }).done(function(response){
            console.log(response);
        });
    });

正如您所看到的，我正在尝试发送帧和颜色：

data: {
                frame: $('input.frame:checked').val(),
                color: $('input.color:checked').val()
            },

但是，它并没有将这两个选项结合起来，当我单击框的复选框时，它只发送框：当我单击颜色的复选框时，它只发送颜色。如下面的打印屏幕所示

我希望它能像这样构建URL： 刷新检查？颜色=银色，边框=h35

我如何做到这一点

---

非常感谢您的帮助。

您也可以发送以下数据：

$(".ajax-button").change(function(event){

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });

    $.ajax({
        url:'{{action("WebshopController@refreshCheckout")}}/?frame=$("input.frame:checked").val()&color=$("input.color:checked").val()' ,
        method: 'GET'
    }).done(function(response){
        console.log(response);
    });
});

---

编辑：答案应该是被接受的。

我想下面的表达式不会返回任何结果

frame: $('input.frame:checked').val(),
                color: $('input.color:checked').val()

在请求之前检查它。 如果您在那里传递一些数据，它将起作用

data: {
                frame: 'foo',
                color: 'bar'
            },

---

如果值未定义…jQuery将不包括该属性。无法从不存在（未选中）的选择器获取值

在提交之前，您可能希望确保您拥有以下两项：

$(".ajax-button").change(function(event) {

  var $frameInput = $('input.frame:checked'),
    $colorInput = $('input.color:checked');

  if (!($frameInput.length && $colorInput.length)) {

    alert('Need both color and frame');

  } else {

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    });

    $.ajax({
      url: '{{action("WebshopController@refreshCheckout")}}',
      data: {
        frame: $frameInput.val(),
        color: $colorInput.val()
      },
      method: 'GET'
    }).done(function(response) {
      console.log(response);
    });
  }
});

---

你没有发布你的HTML代码，所以很难说到底是什么被破坏了。但是，仅为了说明当前接受的答案可能不是您要查找的答案，并且您的代码是正确的，除非您可能不会在您确实想要触发事件时（即，当两个字段都设置好时）触发事件，正如charlietfl在答案中所建议的那样

HTML:

---

您可以尝试一下，看看各种情况下会得到什么。

请将HTML显示出来，好了，现在它可以工作了。但是现在它看不到哪个值是check，我使用了：checked选择器，或者在为ajax数据指定值之前通常先检查它。因此，在这一步中，您将检查它们是否已设置，然后在两个单独的步骤（

var

）中获取值。好的，我想我必须找到一种不同的方法来检查哪个值已被检查。至少请求现在起作用了。谢谢你。我会同意你的回答。如果你先分配变量与否没有区别，op方法将值传递给对象没有问题。现在你正在检查

if（$（选择器））

，它将始终是真实的…返回一个对象，而不管匹配的元素与否。不会以这种方式工作这不会在字符串中计算

$（“input.frame:checked”）.val（）

。。。您必须连接才能这样做

  <p>
  Color
  </p>
  <input type="radio" class="color" value="red" name="color">
  red
  <input type="radio" class="color" value="orange" name="color">
  orange
  <input type="radio" class="color" value="purple" name="color">
  purple
  <input type="radio" class="color" value="green" name="color">
  green

  <p>
  Frame
  </p>
  <input type="radio" class="frame" value="silver" name="frame">
  silver
  <input type="radio" class="frame" value="gold" name="frame">
  gold
  <input type="radio" class="frame" value="tan" name="frame">
  tan
  <input type="radio" class="frame" value="black" name="frame">
  black

  <p><button class="ajax-button">Button</button></p>

    $(".ajax-button").click(function(event) {
     // OP code         
     var color = $('input.color:checked').val();
     var frame = $('input.frame:checked').val();

     console.log("Current OP Code Results: ");
     console.log(color);
     console.log(frame);

     // Accepted code
      var data1 = $('input.color').val();
      var data2 = $('input.frame').val();

      console.log("Current Accepted Answer Results: ");
      console.log(data1);
      console.log(data2);

      return false;
    });