javascript - 无法阻止提交的表单刷新页面

Question

表单是动态显示的，并给出 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并尝试获取要在页面上提交的表单并将一个输入的值发送到 Controller ，以便我可以获得该id并使用它来存储数据库中另一个表的信息。它当然有效，但它也会刷新页面......这就是我正在寻找的。页面变成空白，我知道发生这种情况是因为我没有在 Controller 中返回任何内容...这并不重要，因为当我在 Controller 中返回同一页面时，它仍然显示页面正在刷新...这就是我想要摆脱的。我只想通过 ajax 发送数据，这样我就可以使用它......没有页面刷新。我不明白为什么我会遇到这个问题。我在这里阅读了很多有关防止刷新的其他问题，但没有一个解决方案有效。有什么想法吗？

Answer 1

由于您自己通过 ajax 处理 POST(您的第一个 jquery 示例)，因此请尝试将按钮从类型“submit”更改为仅类型“button”