javascript - Laravel 5,4 JavaScript 函数与 ajax

Question

我有一个带有ajax的java脚本函数。我在 laravel Blade 循环中调用函数，并且我有一个提交销售的表单。我需要分别对每个产品进行销售，但使用相同的 ajax 代码。

我的表单如下所示:

这是我的 Blade 文件脚本:

@if($inventories)

<a href="{{ url('/inventory') }}" type="button" class="btn btn-sm btn-primary"> <<- Back To Inventory</a>    
<div class="text-center"><b>Search Page</b></div>
<br>
<br>

<div class="search">
    <div class="col-md-12">
        @include(env('THEME').'.search_box')
    </div>
</div>

<table>

    @foreach($inventories as $inventory)
    <tr >
        <td class="part_img" rowspan="3"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}"><img src="{{ asset(env('THEME')) }}/images/inventory/{{$inventory->main_img}}"></a></td>
    </tr>
    <tr>
        <td class="inventory_part_title" colspan="8">
            <div style="float: left; margin: 0 30px;">{{ $inventory->part_number }}</div>
            <div style="float: left;"><a href="{{ route('inventory.show',['slug' => $inventory->slug]) }}">{{ $inventory->title }}</a></div>
            <div style="float: right; margin-right: 50px;">{{ $inventory->upc_number }}</div>
        </td>
    </tr>
    <tr>
        <td><b>Location:</b> {{ $inventory->storage_location }}</td>
        <td><b>Brand:</b> {{ $inventory->brand }}</td>
        <td><b>Supplier:</b> {{ $inventory->supplier }}</td>
        <td><b>GBP:</b> &#163;{{ $inventory->unit_price_gbp }}</td>
        <td><b>USD:</b> ${{ $inventory->unit_price_usd }}</td>
        <td><b>In Stock:</b> {{ $inventory->unit_in_stock }}</td>
        <td><b>Sold:</b> {{ $inventory->unit_sold }}</td>
        <td>
            <div class="onpage-sold-input">
                {!! Form::open(['url' => route('sold.sold'),'class'=>'contact-form', 'id'=>'search-sold-button-'.$inventory->id,'method'=>'POST']) !!}
                    {!! Form::text('sold', old('sold'), array('class'=>'form-control', 'placeholder'=>'Qty.')) !!}
                    <input type="hidden" name="part_id" value="{{ $inventory->id }}">
                    <!--<input type="hidden" name="_token" value="{{ csrf_token() }}">-->
                    {!! Form::button('Sold', ['class' => 'btn btn-sm btn-success sold-button', 'id'=>'sold-button-'.$inventory->id,'type'=>'submit']) !!}
                {!! Form::close() !!}
            </div>

            <script type="text/javascript">
                var product_id = {{ $inventory->id }};
                ajax_search_sold(product_id);
            </script>

        </td>
        <!--<td><button type="button" class="btn btn-sm btn-success">Edit</button></td>-->
    </tr>
    <tr>
        <td colspan="8"></td>
    </tr>
    @endforeach

</table>

@else    
<p>Inventory is empty!</p>
@endif

这是我的 JavaScript 函数，其中包含 AJAX 脚本:

function ajax_search_sold(product_id){

    jQuery.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        }
    });

    $('#sold-button-'+product_id).on('click', function (e) {
        e.preventDefault();

        var form = $('#search-sold-button-'+product_id),
            data = form.serialize(),
            ajax_url = form.attr('action'),
            alert_section = $('.alert-section');

            console.log(ajax_url);
            console.log(data);

        $.post(ajax_url, data, function (resp) {
            alert_section.fadeIn().find('.alert').html(resp);
            setTimeout(function () {
                alert_section.fadeOut();
            }, 3000)
        })
    });
}

如何编写一个带有 AJAX 的函数来为每个销售循环传递数据？

Answer 1

现在，您将两种可能的方式混合为一种。

1. 应用 onclick 事件来触发该函数。
2. 创建适用于按钮的 jquery 来执行 ajax 调用。

您所做的是将 jquery 按钮事件应用到从未被调用的函数中。要解决此问题，请选择以上其中一项，例如

为按钮添加onClick参数

 {!! Form::button('Sold', ['class' => 'btn btn-sm btn-success sold-button', 'id'=>'sold-button-'.$inventory->id,'type'=>'submit','onClick'=>'ajax_search_sold('.$inventory->id.')']) !!}

然后，删除

 $('#sold-button-'+product_id).on('click', function (e) {

这样当函数被调用时你的进程就可以运行。