如何使用ajax传递多个值?

I'm looking to pass multiple values with ajax.

我希望用ajax传递多个值。

My Code:

我的代码:

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

As you can see im trying to send a frame and a color:

你可以看到我正在尝试发送一个框架和颜色:

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

However it does not combine these 2, when I click the checkbox for frame it only sends the frame: and when I click checkbox for color is only sends the color. as seen in the printscreen below.

但是它没有合并这两个，当我为框架点击复选框时，它只发送框架:当我为颜色点击复选框时，它只发送颜色。如下面的printscreen所示。

I want it to build the URL like: refreshCheckout?color=Silver&frame=h35

我希望它构建这样的URL: refreshCheckout?color=Silver&frame=h35

How do I achieve this?

我如何做到这一点?

Help is appreciated.

帮助是感激。

5 个解决方案

#1

EDIT: The answer below should be the accepted one.

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

#2

If a value is undefined...jQuery won't include that property. You can't get a value from a selector that doesn't exist (not checked)

如果一个值未定义…jQuery不会包含该属性。无法从不存在的选择器中获取值(未选中)

You probably want to make sure you have both before submitting:

在提交之前，你可能想要确保两者都有:

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

#3

you can also send data like

您也可以发送类似的数据。

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

#4

I suppose following expressions return nothing

我想下面的表达式什么也不返回

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

Check it before the request. It will work if you pass some data there

在请求之前检查一下。如果你在那里传递一些数据，它就会工作

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

#5

You didn't post your HTML code, so it's hard to tell what exactly is broken. However, simply to illustrate that the current accepted answer is probably not what you are looking for and that your code is correct except that you are likely not triggering the event when you really want to (i.e. when both fields are set) as suggested in the answer by charlietfl.

你没有发布你的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;
    });

You can play around with that and see what you get for various cases.

你可以尝试一下，看看你能从不同的案例中得到什么。

#1