如何使用ajax传递多个值？

Question

我想通过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()
            },

但是，它没有合并这2个元素，当我单击框架复选框时，它仅发送框架：而当我单击颜色复选框时，仅发送颜色。 如下面的打印屏幕所示。

我希望它构建如下网址：refreshCheckout？color = Silver＆frame = h35

我该如何实现？

感谢帮助。

Answer 1

如果未定义值，则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);
    });
  }
});

Answer 2

您还可以发送数据

$(".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);
    });
});

Answer 3

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

Answer 4

我想以下表达式什么都不返回

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

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

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

Answer 5

您没有发布HTML代码，因此很难说出到底是什么。 但是，只是为了说明当前接受的答案可能不是您要查找的内容，并且您的代码是正确的，除了在您确实希望（如同时设置两个字段）时，您可能不触发事件，如charlietfl的回答。

https://jsfiddle.net/b1g1pmnp/

HTML：

  <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>

JS：

    $(".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;
    });

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