javascript - 在 Laravel 4 中使用 AJAX 提交表单

Question

如何在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 更改为类，这已解决!谢谢大家!你们真棒，答案很有值(value)。下次我会格外小心。 :D

Answer 1

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

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