如何使用ajax传递多个值？

Question

I'm looking to pass multiple values with 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.

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

How do I achieve this?

Help is appreciated.

Answer 1

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)

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

Answer 2

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

Answer 3

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

Answer 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'
            },

Answer 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 (ie when both fields are set) as suggested in the answer by 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.