可以'；t停止刷新已提交的表单 - can't stop submitted form from refreshing page

表单是动态显示的，并给出id，这样我就可以知道它来自哪个表单。。。

这是php/html表单

<div class="col-sm-4 text-center">
    <!-- Task Name -->
    <div><img src="{{ URL::asset('public/mealpics') }}/{{ $meal->picture }}" /></div>
    <div>{{ $meal->name }} by {{ $meal->author }}</div>
    <div>Rating: {{ $meal->rating }}</div>
    <div>Cal: {{ $meal->calories }} Fat: {{ $meal->fat }} Chol: {{ $meal->cholesterol }}</div>
    <div>Sodium: {{ $meal->sodium }} Sugar: {{ $meal->sugar }}</div>
    <div>{{ $meal->created_at }}</div>
    <div>
        <form action="/mealtrist" method="post" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="{!! csrf_token() !!}">
            <input type="hidden" class="form-control" id="onPlan{{$meal->id}}" name="onPlan"
                   value="{{ $meal->id }}">
            <button id="submit_btn" data-mealid="{{$meal->id}}" type="submit" class="btn btn-default">Add To Plan</button>
        </form>
    </div>
</div>

和jquery ajax

$(document).ready(function () {         
    $('submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId");
        var mealId = '#onPlan' + diffValue;
        jQuery.ajax({
            url : '<?php echo URL::to('mealtrist') ?>',
            type : 'POST',
        data : {
            onPlan: diffValue},
            });
    });
});

我也试过这个。。。

$(document).ready(function () {         
    $('#submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId");
        var mealId = '#onPlan' + diffValue;
        $('#form').submit(function (e) {
            jQuery.ajax({
                url : '<?php echo URL::to('mealtrist') ?>',
                type : 'POST',
            data : $(mealId).serialize(),               success : function( response ) {
                $('#added').empty();
                $(response).appendTo("#added");
            } 
        });
        e.preventDefault();
        });
    });
});

我也试过

('#form').on('submit', function (e) {
    ///i've even tried the e.preventDefault(); here but I think that prevents the code below from sending.
    ////code
    e.preventDefault();
});

这些似乎都不起作用。我使用larvel 5.1，试图在页面上提交一个表单，并将一个输入的值发送到控制器，这样我就可以获得该id，并使用它将另一个表中的信息存储在数据库中。它当然有效，但它也刷新了页面。。。这就是我要找的。页面变成空白，我知道这是因为我没有在控制器中返回任何东西。。。这并不重要，因为当我在控制器中返回同一页面时，它仍然显示页面正在刷新。。。这就是我想要摆脱的。我只想通过ajax发送数据，这样我就可以使用它……没有页面刷新。我不明白我为什么会有这个问题。我在这里读到了很多关于防止刷新的其他问题，但没有一个解决方案奏效。知道吗？

由于您自己通过ajax处理POST（您的第一个jquery示例），请尝试将按钮从类型"submit"更改为仅类型"button"

这应该有助于

$('form').submit(function (e) {
    return false;
});

form没有id #form。请改用form。

$('form').on('submit', function (e) {
    e.preventDefault();
});

首先将id设置为form-

<form id="MyForm" action="/mealtrist" method="post" enctype="multipart/form-data">

然后使用这个--

$(document).ready(function() {
    $("#MyForm").on('submit', function(e) {
        e.preventDefault();                
    })
});

我尝试了上面所有的表单提交答案。return false不起作用，event.prventDefault（）不起作用。我的问题也不太清楚。我真的认为提交表单比使用ajax更安全，所以这就是我尝试使用表单的原因。我最终只使用ajax发送数据。

        $(document).ready(function () { 
        $('.submit_btn').click(function(event) {
        event.preventDefault();
        var diffValue = $(event.currentTarget).attr("data-mealId"); 
            jQuery.ajax({
                url : '<?php echo URL::to('meals') ?>',
                type : 'POST',
                data : {
                        onPlan: diffValue},
/*              success : function( response ) {
                    $('#added').empty();
                    $(response).appendTo("#added");
                } */
            });
    });
});

它非常好用。