如何通過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; 
    }); 

你可以玩與和看看你的各種情況。