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，当我单击框的复选框时它只发送框架：当我单击复选框时，颜色只发送颜色。如下面的版画屏幕所示。

我希望它构建如下的URL：？refreshCheckout颜色=银＆安培;帧= 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

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

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;
    });

你可以玩弄它，看看你得到的各种情况。

如何使用ajax传递多个值？

5 个答案: