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更改为类，这已解决！谢谢大家！你们很棒，答案很有价值。下次我会特别小心。：d

Answer 1

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

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

Answer 2

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

.kolumny{ width:100%; padding-left:30px; padding-right:30px; }
.polowa{ width:50%; display:inline-block; float:left; }
.polowa2{ width:50%; display:inline-block; }

您必须在提交功能的回调中捕获事件，并使用 preventDefault（）方法阻止它。

Answer 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() }}

我认为这将有效。

Answer 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;
});

});

在Laravel 4中使用AJAX提交表单

4 个答案: