在 Laravel 4 中使用 AJAX 提交表单答案

【问题标题】：Submit Form using AJAX in Laravel 4在 Laravel 4 中使用 AJAX 提交表单
【发布时间】：2015-07-21 08:17:14
【问题描述】：

在 LARAVEL 4 中使用 AJAX 提交后如何使页面不刷新？

//xx.blade.php

{{ Form::open(['url' => '/booking/unit', 'method' => 'POST', 'id' => 'readForm']) }}
{{ Form::hidden('bookingid', $booking->id) }} 
{{ Form::hidden('unitid', $booking->unit) }} 
<button class="btn btn-warning" data-toggle="collapse" data-target="#{{$booking->id}}" type="submit">{{ $booking->status }}</button>
{{ Form::close() }}

我尝试过的另一种方法：

<form method="post" action="../booking/unit/" id="readForm" >
<input value="{{$booking->id}}" hidden name="bookingid" />
<input value="{{$booking->unit}}" hidden name="unitid" />
<button class="btn btn-warning" type="submit" id="readBtn" >{{ $booking->status }}</button>
</form>

//js

$("document").ready(function(){
$("#readForm").submit(function(){
    data = $(this).serialize();
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "../booking/unit", 
        data: data,
        success: function(data) {
            alert("Form submitted successfully.\nReturned json: " + data["json"]);
        }
    });
    return false;
});

});

我的页面还在刷新。为什么？

更新 [2015 年 7 月 22 日] 我实际上有多个表格行，表格具有相同的 ID。除了表单的第一行之外，导致刷新发生。我已将表单 id 更改为 class，这就解决了！谢谢大家！你们太棒了，答案很有价值。下次我会格外小心。 :D

【问题讨论】：

尝试阻止form submit 像$("#readForm").submit(function(event){event.preventDefault()}); 后跟正常代码！！
检查浏览器控制台是否有错误。
@TheAlpha 无法看到控制台，因为页面已刷新。

标签： javascript php jquery ajax laravel

【解决方案1】：

$("#readForm").submit(function(e){
    e.preventDefault();
});

您是否在 ajax 函数中尝试过 e.preventDefault。这只会停止刷新页面

【讨论】：

$("#readForm").submit(function(e){ alert('Hurray..!'); }); 这对你有用吗？如果是意味着发表评论
所以你的表单有问题。纠正他们。或添加完整代码。你试过像<form method="post" action"/booking/unit"></form>这样的普通形式吗？

【解决方案2】：

基本上，当您单击表单中的提交按钮时，它会自动重新加载。这是默认行为。所以你需要覆盖行为。

$("#readBtn").submit(function(e){
    e.preventDefault();
});

您必须在提交函数的回调中捕获事件并使用 preventDefault() 方法阻止它。

【讨论】：

【解决方案3】：

{{ Form::open(['url' => '/booking/unit', 'method' => 'POST', 'id' => 'readForm']) }}
{{ Form::hidden('bookingid', $booking->id) }} 
{{ Form::hidden('unitid', $booking->unit) }} 
<button onclick="return false;" class="btn btn-warning" data-toggle="collapse" data-target="#{{$booking->id}}" type="submit">{{ $booking->status }}</button>
{{ Form::close() }}

我认为这会起作用。

【讨论】：

很抱歉，我无法将 onclick 功能添加到按钮，因为我需要单击同一个按钮才能执行其他操作。
嗯。试试 $('.btn-warning').click(function(){ e.preventDefault(); });类似的东西。

【解决方案4】：

你需要防止默认

$("document").ready(function(){
$("#readForm").submit(function(e){

// prevent from submiting
e.preventDefault();

    data = $(this).serialize();
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "../booking/unit", 
        data: data,
        success: function(data) {
            alert("Form submitted successfully.\nReturned json: " + data["json"]);
        }
    });
    return false;
});

});

【讨论】：