使用 preventDefault 提交 Ajax 表单

Posted 2023-03-05

【中文标题】使用 preventDefault 提交 Ajax 表单

【英文标题】：Ajax Form submit with preventDefault

【发布时间】：2013-12-19 14:34:43

【问题描述】：

我有一个普通的 html 表单，它应该防止默认表单提交并通过 Ajax 发布值。它不适用于我的设置请帮助我哪里出错了。 将我视为 Jquery 中的新手，javascrip

 <link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.css">

<link rel="stylesheet" type="text/css" href="./jQuery MultiSelect Widget Demo_files/jquery-ui.css">
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.js">     </script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.form.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jQuery MultiSelect Widget Demo_files/jquery.multiselect.js"></script>
<script type="text/javascript">
    $(function()

       $("select").multiselect(
          selectedList: 4
       );

    );
</script>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (ev) 
    $.ajax(
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) 
            alert('ok');
        
    );

    ev.preventDefault();
);

我的表单看起来像

<form action=index1.php id="contactForm1" method="post">
<p>
    <select name="example-list[]" multiple="multiple" style="width: 400px; display: none;">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>

    </select>
</p>
<input class="text"  type="submit"  value='GO'>
 </form>
 </body>
 </html>

【问题讨论】：

AFAIK, ev.preventDefault(); 应该首先出现。而且你应该将你的代码包装在 dom 就绪事件中。

【参考方案1】：

将提交按钮设置为type="button"，而不是type="submit"，

假设提交按钮的 ID 为 submit-button。您可以像这样在 javascript 中提交表单：

$("#submit-button").click(function() 
 //send ajax
)

【参考方案2】：

将您的代码封装在DOM Ready中

$(function () 
    var frm = $('#contactForm1');
    frm.submit(function (ev) 
        $.ajax(
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) 
                alert('ok');
            
        );
        ev.preventDefault();
    );
);

【讨论】：

我会将 preventDefault 移到 Ajax 之前，以防 ajax 部分出现错误时无法正常提交表单

【参考方案3】：

$('#submit').click(function(e)

    //call ajax

e.preventDefault();
)

【参考方案4】：

即使使用preventDefault()，提交表单时页面是否刷新？

在您的表单上，将# 放入操作属性并删除method。

修改你的JS代码

var frm = $('#contactForm1'); frm.submit(function (ev) ev.preventDefault(); $.ajax( type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) alert('ok'); ); );

将preventDefault 放在 ajax 触发之前。您的代码中发生的情况是，您的表单正在使用 HTML 中提供的操作和方法执行，因此您的 JS 无法捕获它。