如何使用 ajax 提交带有 3 个提交按钮的表单而不重定向到 Laravel 中的表单操作 url？答案

【问题标题】：How to submit a form with 3 submit buttons using ajax without redirecting to the form action url in Laravel?如何使用 ajax 提交带有 3 个提交按钮的表单而不重定向到 Laravel 中的表单操作 url？
【发布时间】：2021-11-18 05:19:49
【问题描述】：

我这里有一个数据表，里面有一个表单，里面有 3 个提交按钮。我做了一个 switch 语句，它检查单击了哪个提交按钮，然后在我的 store() 函数上执行该提交按钮的操作。目前，我正在尝试使用 ajax 提交表单。如果我删除 switch 语句，只返回一个操作/函数。例如saveCredit()，然后将数据保存在数据库中。但是，使用switch 语句，它不会保存任何数据。

另外，另一个例子是如果我删除e.preventDefault()，它会将数据保存在数据库中，但它会重定向到不应该的make-a-sale/save-purchase 路由。它必须重定向到同一页面。即使有switch 语句和e.preventDefault()，如何让提交按钮将数据保存在数据库中？如何让它重定向到当前页面？我在这里做错了什么？

请看我的控制器：

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\{
    Customer\BillingInfo, 
    Customer, 
    Product, 
    Purchases,
    SetupBusiness
};
use App\Traits\PrintReceiptTrait;
use Carbon\Carbon;
use Picqer;
use Auth;

class PurchasesController extends Controller
{
    use PrintReceiptTrait;

    public function index()
    {
        return view('make-a-sale.index', ['has_id' => false]);
    }

    public function indexWithId($product_id)
    {
        return view('make-a-sale.index', ['product_id' => $product_id, 'has_id' => true]);
    }

    public function create()
    {
        return view('make-a-sale.index');
    }

    public function computeAndConvertData(Request $request)
    {
        $qty_per_item = array_map('intval', $request->qty);
        $zero = floatval('0.00');
        $payment = floatval($request->payment);
        $total = floatval($request->total);
        $balance = $total - $payment;

        $new_data = array(
            'qty_per_item' => $qty_per_item, 
            'zero' => $zero, 
            'payment' => $payment, 
            'total' => $total, 
            'balance' => $balance
        );

        return $new_data;
    }

    public function saveCredit(Request $request)
    {
        $product_ids = array_map('intval', $request->product_id);
        $cod = $this->computeAndConvertData($request);
        $data = $this->createData($request, $product_ids, $cod['qty_per_item'], $cod['balance']);
        $this->createPurchaseData($data, $product_ids, $cod['qty_per_item'], $cod['zero'], $cod['total']);
        $this->updateProductQtyOnHand($product_ids, $cod['qty_per_item']);

        return redirect()->route('make-a-sale.index');
    }

    public function savePurchaseAndPrint(Request $request)
    {
        $product_ids = array_map('intval', $request->product_id);
        $cod = $this->computeAndConvertData($request);

        $payment = $cod['payment'] == $cod['zero'] ? $cod['zero'] : $request->payment;
        $balance = $cod['balance'] != $cod['zero'] ? $request->total : $cod['balance'];

        $data = $this->createData($request, $product_ids, $cod['qty_per_item'], $balance);
        $purchase = $this->createPurchaseData($data, $product_ids, $cod['qty_per_item'], $payment, $balance);
        $this->updateProductQtyOnHand($product_ids, $cod['qty_per_item']);

        return $this->printReceipt($purchase->code, $purchase->barcode, $purchase->product_id, $purchase->qty_per_item, $purchase->balance);
    }

    public function savePurchase(Request $request)
    {
        $product_ids = array_map('intval', $request->product_id);
        $cod = $this->computeAndConvertData($request);
        $data = $this->createData($request, $product_ids, $cod['qty_per_item'], $cod['balance']);
        $this->createPurchaseData($data, $product_ids, $cod['qty_per_item'], $request->payment, $cod['balance']);
        $this->updateProductQtyOnHand($product_ids, $cod['qty_per_item']);

        return redirect()->route('make-a-sale.index');
    }

    public function store(Request $request)
    { 
        switch($request->get('action_create')) {
            case 'credit':
                $this->saveCredit($request);
                break;
            case 'save_and_print':
                $this->savePurchaseAndPrint($request); 
                break;
            case 'save':
                $this->savePurchase($request); 
                break;
            default:
                return redirect()->route('make-a-sale.index');
        }
    }

    private function generateRandomNumbers($length = 12) 
    {
        $num = '0123456789';
        $num_length = strlen((string)$num);
        $random_number = '';
        for ($i = 0; $i < $length; $i++) {
            $random_number .= $num[rand(0, $num_length - 1)];
        }
        return $random_number;
    }

    private function generateBarcode($code_to_convert)
    {
        $generator = new Picqer\Barcode\BarcodeGeneratorHTML();
        $barcode = $generator->getBarcode($code_to_convert, $generator::TYPE_CODE_128, 2, 35);
        return $barcode;
    }

    public function createData(Request $request, $product_ids, $qty_per_item, $balance)
    {
        $code = $this->generateRandomNumbers();

        $validation = $request->validate([
            'code' => 'unique:purchases',
            'product_id' => 'required', 
            'customer_id' => 'required'
        ]);

        $data = array_merge($validation, [
            'code' => $code,
            'barcode' => $this->generateBarcode($code),
            'status' => 'Regular', 
            'type' => $balance == floatval('0.00') ? 'Sale' : 'Accounts Receivables', 
            'cashier_id' => Auth::user()->id, 
            'customer_id' => $request->customer_id, 
            'product_id' => $product_ids, 
            'no_of_items' => $request->no_of_items, 
            'qty_per_item' => $qty_per_item, 
            'payment_type' => $balance <= 0 ? 'cash' : 'credit', 
            'total' => $request->total, 
            'created_at' => Carbon::now()->timestamp
        ]);

        return $data;
    }

  

    public function createPurchaseData($data, $product_id, $qty_sold, $payment, $balance)
    {
        $purchases = Purchases::create(array_merge($data, [
            'payment' => $payment, 
            'balance' => $balance, 
            'product_details' => $this->createProductsDetails($product_id, $qty_sold)
        ]));
        return $purchases;
    }

    public function updateProductQtyOnHand($product_ids, $qty_per_item)
    {
        $products = array_combine($product_ids, $qty_per_item);

        foreach ($products as $product_id => $receive_item_qty) {
            $qty_on_hand = Product::where('id', '=', $product_id)->value('qty_on_hand');
            $difference = $qty_on_hand - $receive_item_qty;

            Product::select('qty_on_hand')->where('id', '=', $product_id)->update(['qty_on_hand' => $difference]);
        }
    }
}

这是我的路线：

Route::post('make-a-sale/save-purchase', [PurchasesController::class, 'store'])->name('make-a-sale.store');

这是我的一些 Ajax：

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function() {
    $.noConflict();
    
    var tableId = '#tbl-make-a-sale';

    // Footer button group actions
    saveCredit(tableId);
    savePurchase(tableId);
});
    function saveCredit(tableId) {
        $('#btn-credit').on('click', function(e) { 
            e.preventDefault(); 
            if (!$("input[name='product_id[]']").val()) {
                toastr.error('The table is empty. Please add some products first.');
            } else {
                let productIds = $("input[name='product_id[]']").map(function(){ return $(this).val(); }).get();
                let qtyPerItem = $("input[name='qty[]']").map(function(){ return $(this).val(); }).get();
                let params = {
                    product_id: productIds,
                    qty: qtyPerItem,
                    no_of_items: $("input[name='no_of_items']").val(),
                    customer_id: $("input[name='customer_id']").val(),
                    payment: parseFloat($('input[name="payment"]').val()), 
                    total: parseFloat($('input[name="total"]').val()),
                    _token: $('meta[name="csrf-token"]').attr('content')
                }
    
                $.ajax({
                    url: 'make-a-sale/save-purchase',
                    type: 'POST',
                    data: params,
                    success: function(data) {
                        toastr.success("A new ledger has been created!");
                        $(tableId).DataTable().clear().draw(false);
                        $('#search-customers').val('0').trigger('change.select2').prop('disabled', true);
                        $('#cash-container, #txt-amount-due').hide();
                    },
                    error: function(xhr, status, error) {
                        let errors = xhr.responseJSON.errors;
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                toastr.error(errors[key]);
                            }
                        }
                    }
                });
            }
        });
    }
    
    function savePurchase(tableId) {
        $('#btn-save').on('click', function(e) {
            e.preventDefault();
            if (!$("input[name='product_id[]']").val()) {
                toastr.error('The table is empty. Please add some products first.');
            } else {
                let productIds = $("input[name='product_id[]']").map(function(){ return $(this).val(); }).get();
                let qtyPerItem = $("input[name='qty[]']").map(function(){ return $(this).val(); }).get();
                let params = {
                    product_id: productIds,
                    qty: qtyPerItem,
                    no_of_items: $("input[name='no_of_items']").val(),
                    customer_id: $("input[name='customer_id']").val(),
                    payment: parseFloat($('input[name="payment"]').val()), 
                    total: parseFloat($('input[name="total"]').val()),
                    _token: $('meta[name="csrf-token"]').attr('content')
                }
    
                $.ajax({
                    url: 'make-a-sale/save-purchase',
                    type: 'POST',
                    data: params,
                    success: function(data) {
                        toastr.success("Products have been sold successfully!");
                        $(tableId).DataTable().clear().draw(false);
                        $('#search-customers').val('0').trigger('change.select2').prop('disabled', true);
                        $('#cash-container, #txt-amount-due').hide();
                    },
                    error: function(xhr, status, error) {
                        let errors = xhr.responseJSON.errors;
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                toastr.error(errors[key]);
                            }
                        }
                    }
                });
            }
        });
    }

这是我的 HTML：

 <form id="form-make-a-sale" action="{{ route('make-a-sale.store') }}" method="post" enctype="multipart/form-data">
                        @csrf                   
                        <table id="tbl-make-a-sale" class="w-full tbl-responsive overflow-x-auto rounded-lg border-none tbl-default">
                            <thead class="w-min">
                                <tr>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">Actions</th>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
                                        Barcode
                                    </th>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
                                        Name
                                    </th>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
                                        Description
                                    </th>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
                                        Qty. On Hand
                                    </th>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
                                        Qty. To Sell
                                    </th>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none hidden">
                                        SRP
                                    </th>
                                    <th
                                        class="px-6 py-0 bg-persian-blue h-16 text-left text-xs text-white uppercase tracking-wider border-none">
                                        Ext. Price
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white"></tbody>
                        </table>
                        <div class="w-full pb-6 md:pb-0 border-t border-gray-200 md:border-none">
                            <div class="flex bg-white justify-between items-center">
                                <div class="pt-6 pb-0 px-6 whitespace-no-wrap">
                                    <p class="text-2xl text-gray-700 font-bold">Total</p>
                                </div>
                                <div class="pt-6 pb-0 px-6 whitespace-no-wrap">
                                    <p class="text-4xl text-gray-700 font-extrabold font-mono text-right">
                                        <span id="total">₱ 0.00</span>
                                        <input type="hidden" name="total" readonly/>
                                    </p>
                                </div>
                            </div>
                            <div id="cash-container" style="display: none;">
                                <div class="flex justify-between items-center">
                                    <div class="px-6 whitespace-no-wrap">
                                        <p class="text-lg text-gray-700 font-bold">Cash</p>
                                    </div>
                                    <div class="px-6 whitespace-no-wrap">
                                        <p class="text-lg text-gray-700 font-extrabold font-mono text-right">
                                            <span id="cash">0.00</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 w-full md:border-t md:border-b md:border-gray-200">
                            <div id="amount-due-container" class="flex bg-persian-blue md:bg-white justify-between items-center">
                                <div class="p-6 whitespace-no-wrap">
                                    <p id="lbl-amount-due" class="text-2xl text-gray-50 md:text-gray-700 font-bold">Amount Due</p>
                                </div>
                                <div class="p-6 whitespace-no-wrap">
                                    <p id="txt-amount-due" class="text-3xl text-gray-50 md:text-gray-700 font-extrabold font-mono text-right">
                                        <span id="amount_due"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div id="btn-footer-group-mas" class="m-6 justify-between">
                            <button type="button" class="px-8 py-4 text-md font-medium text-gray-50 transition-colors duration-300 transform bg-red-400 hover:bg-red-500 rounded hover:text-white focus:outline-none focus:ring cstm-size-m-mas cstm-size-w-full-mas btn-clear" name="clear" value="clear" tabindex="2">Clear
                            </button>
                            <div id="btn-footer-right-group-mas">
                                <button type="button" id="btn-cash" class="px-8 py-4 text-md font-medium text-white transition-colors duration-300 transform rounded bg-green-400 hover:bg-green-300 focus:outline-none focus:ring cstm-size-m-mas cstm-size-w-full-mas" data-hystmodal="#pay-in-cash-modal" tabindex="3">Cash
                                </button>
                                <button type="submit" id="btn-credit" class="px-8 py-4 text-md font-medium text-white transition-colors duration-300 transform rounded bg-yellow-400 hover:bg-yellow-300 focus:outline-none focus:ring cstm-size-m-mas cstm-size-w-full-mas credited" name="action_create" value="credit" tabindex="4">Credit
                                </button>
                                <button type="submit" id="btn-save-and-print" class="px-8 py-4 text-md font-medium text-indigo-400 transition-colors duration-300 transform border-2 border-indigo-400 rounded bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring disabled:opacity-40 cursor-not-allowed cstm-size-m-mas  cstm-size-w-full-mas" name="action_create" value="save_and_print_receipt" tabindex="5">Save and Print Receipt
                                </button>
                                <button type="submit" id="btn-save" class="px-8 py-4 text-md font-medium text-white transition-colors duration-300 transform rounded bg-indigo-600 rounded hover:bg-indigo-500 focus:outline-none focus:ring cstm-last-el-size-m-mas cstm-size-w-full-mas" name="action_create" value="save" tabindex="6">Save
                                </button>
                            </div>
                        </div>
                    </form>

非常感谢任何帮助。

【问题讨论】：

嘿，我不明白你的问题。但首先检查 ajax 发送是否调用您的控制器方法？只需从控制器返回任何字符串，然后在 ajax 成功函数部分在控制台中打印响应字符串或警告该控制器字符串
&第二件事你不需要在 ajax 请求中编写硬编码的 URL

标签： ajax laravel routes submit preventdefault

【解决方案1】：

在控制器端，您可以将 JSON 重定向到前端的 Ajax，而不是重定向到路由。例如：而不是：

return redirect()->route('make-a-sale.index');

你可以：

return response()->json(["status"->true]);

【讨论】：

谢谢，知道了。但是，它仍然没有将数据保存到数据库中。
使用 try{}catch(\Exception $e){} 并检查代码是否抛出任何异常。
对不起，它没有返回任何错误。
我的表单操作应该是这样吗？那是对的吗？ <form id="form-make-a-sale" action="{{ route('make-a-sale.store') }}" method="post"></form>

【解决方案2】：

您的问题我不明白，但首先检查提交您的 Ajax 发送请求到您的控制器功能不是...

第二件事，你不需要在 ajax 请求中写硬编码的 url...

$.ajax({
    type: "GET",
    url: "{{ route('home') }}?page="+ page,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    // data: { id: deal_id, }
}).done(function( data ) {
     //on success do your operation
})
.fail(function(jqXHR, ajaxOptions, thrownError)
    alert('No response from server');
});

如果您想在 URL 中传递参数，例如 domainname.com/user/edit/{id} 然后您可以使用路由传递给 ajax，如上相同的 URL...

只需像下面这样操作

user_id = 3; //on click get user_id 
url = "{{ route('admin.users.edit',':id') }}";
url = url.replace(':id', user_id);

然后那个url变量传递给ajax

$.ajax({
    type: "POST",
    url: url,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    // data: { id: deal_id, }
}).done(function( data ) {
     //on success do your operation
})
.fail(function(jqXHR, ajaxOptions, thrownError)
    alert('No response from server');
});

【讨论】：

【解决方案3】：

抱歉@Harsh Patel，如果我不能很好地解释我的问题。

我设法通过以下方式解决了它：

return response()->json([$data]);

并在我的 switch 语句中为每个案例添加重定向：

return redirect()->route('make-a-sale.index');

切换语句：

public function store(Request $request)
{ 
    switch($request->get('action_create')) {
        case 'credit':
            $this->saveCredit($request);
            return redirect()->route('make-a-sale.index');
            break;
        case 'save_and_print':
            $this->savePurchaseAndPrint($request); 
            break;
        case 'save':
            $this->savePurchase($request); 
            return redirect()->route('make-a-sale.index');
            break;
        default:
            return redirect()->route('make-a-sale.index');
    }
}

谢谢@Shree Sthapit

【讨论】：