Laravel，如何通过从复选框发送多个值来使用 ajax 从控制器获取结果

Question

我有一个工作正常的选择框并向控制器发送值，但我想使用复选框而不是这个选择框并且不使用任何提交按钮，所以这是我需要做的

我尝试使用 ajax 和复选框，但当我使用选择框时，无法获取 html 数据，因为它现在与我的代码一起工作

     <select class="offer-multiple" style="width: 100%" name="categories[]" id="categories" multiple="multiple">
                                @foreach($categories as $item)
                                    @if(in_array($item->id,$categoryArray))
                                        <option value="{{ $item->id }}" selected="selected">  {{ $item->title }} - {{ $item->num_offer }} Offer</option>
                                    @else
                                        <option value="{{ $item->id }}">   {{ $item->title }} - {{ $item->num_offer }} Offer</option>
                                    @endif
                                @endforeach
                            </select>

jquery：

$("#categories").change(function() {

//console.log(locationUrl);
var dataArray = [];

var dataString = JSON.stringify($("#categories").val());

var urlCall = '/getOfferCategory/'+locationUrl[5];

console.log(urlCall);

var loadingSection = 'result';
//call ajax
makeAjaxCall(urlCall,dataString,'',loadingSection);
});

Answer 1

不确定这是使用复选框的适当方式。如果您使用 name[] 作为名称，您可以拥有具有相同名称的复选框，以便它向服务器提交一个数组（无论如何是 PHP）。

标记如下所示，但其中包含一个提交按钮。使用复选框选项，您如何知道用户何时完成选择？用户在完成选择后是否必须单击提交按钮或其他东西？

<form action="" method="" class="form" id="form">

    <fieldset>
        <legend>Check Boxes with Same Name</legend>

    <p>
        <label><input type="checkbox" name="category[]" value="1" />1</label>
        <label><input type="checkbox" name="category[]" value="2" /> 2</label>
        <label><input type="checkbox" name="category[]" value="3" /> 3</label>
        <label><input type="checkbox" name="category[]" value="4" /> 4</label>
        <label><input type="checkbox" name="category[]" value="5" /> 5</label>
        <label><input type="checkbox" name="category[]" value="6" /> 6</label>
    </p>

    </fieldset>
    <button type="submit">
    Submit
    </button>

</form>

jQuery 应该是这样的：

$("#form").submit(function(e) {

e.preventDefault();

var urlCall = '/getOfferCategory/action';

$.ajax({
    url: "/echo/html/",
    type: "POST",
    dataType:  "HTML",
    data:  $('#form').serialize()
}).done(function (result, status, xhr) {
    alert(result);
}).fail(function (xhr, status, error) {
    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
});
});

/echo/html/ 用于 Fiddle。