如何通过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颜色=银&帧= H35

如何实现这一目标？

帮助表示赞赏。

Answer 1

编辑：答案below应该接受一个。

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

我想下面的表达式返回任何

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

请求之前检查它。 如果你通过一些数据存在

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

Answer 4

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

你可以玩与和看看你的各种情况。