jQuery 使用 preventDefault 提交 Ajax 表单

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20352799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:08:09  来源:igfitidea点击:

Ajax Form submit with preventDefault

jqueryajaxforms

提问by Prem

I have a normal HTML form in which it is supposed to prevent default form submit and post the values by Ajax. It is not working with my setup Please help me where I went wrong. See me as Novice in Jquery,javascrip

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

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

My Form looks like

我的表格看起来像

<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>

回答by Tushar Gupta - curioustushar

Wrap your code in DOM Ready

将您的代码包装在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();
    });
});

回答by swathi

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

    //call ajax

e.preventDefault();
})

回答by Adis Azhar

Is your page refreshing when you submit the form even with preventDefault()?

当您提交表单时,您的页面是否刷新preventDefault()

  1. On you form, put #in the action attribute and remove method.
  2. Modify your JS code

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

  1. 在您的表单上,放入#action 属性并删除method.
  2. 修改你的 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'); } }); });

Put preventDefaultbefore your ajax fires. Whats happening on your code is, your form is being executed with the action and method supplied in HTML, therefore your JS cannot catch it.

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

回答by Jing

set the submit button as type="button"instead of type="submit",

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

and let's say the submit button has id submit-button. you can submit the form in javascript like this:

假设提交按钮有 id submit-button。您可以像这样在javascript中提交表单:

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