Question

我有一个普通的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>

Answer 1

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

Answer 2

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

    //call ajax

e.preventDefault();
})

Answer 3

即使使用preventDefault()提交表单，页面也会刷新吗？

在表单上，将#放在action属性中，然后删除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'); } }); });

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

Answer 4

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

让我们说提交按钮的标识为submit-button。你可以用这样的javascript提交表格：

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

使用preventDefault提交Ajax表单

4 个答案: