无法阻止提交的表单刷新页面答案

【问题标题】：can't stop submitted form from refreshing page无法阻止提交的表单刷新页面
【发布时间】：2016-03-31 17:53:16
【问题描述】：

表单是动态显示的，并给出了 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.BeginForm()
在读了很多遍这个问题（并预见到上面的一些错误）之后，我想在这里问你：想要的输出是什么？执行ajax请求并阻止页面刷新？如果是这样，请不要提交表格。此外，第一种情况不起作用，因为submit_btn 不是有效的ID（应该是#submit_btn）。第二种情况也不起作用，因为您阻止提交表单，然后手动提交（这是多余的）。第三种情况不起作用，因为没有 id 为 form (#form) 的表单。
谢谢...是的，我发的太快了，应该考虑一下。我正在玩提交表单并防止刷新或 ajax 并在那里留下了太多不必要的代码。我最终只使用了 ajax。

标签： javascript php jquery ajax laravel-5.1

【解决方案1】：

由于您是通过 ajax 自己处理 POST（您的第一个 jquery 示例），请尝试将按钮类型从“提交”更改为仅输入“按钮”

【讨论】：

谢谢...我最终只使用了 ajax。我认为它不太安全，所以我打算尝试只使用 laravel 框架

【解决方案2】：

这应该会有所帮助

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

对不起，那是我的愚蠢...我的意思是（#form）；成为我尝试过的东西...这意味着这不是我现在的实际代码...我尝试将字符串'form'然后我的动态（id）从饭菜中...谢谢.. .抱歉误导你

【解决方案4】：

首先将id 设置为form --

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

那就用这个--

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

    })
});

【讨论】：

【解决方案5】：

我尝试了上面所有的表单提交答案。 return false 不起作用，并且 event.preventDefault() 不起作用。我的问题也不是很清楚。我真的认为提交表单比使用 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");
                } */
            });
    });
});

效果很好。

【讨论】：