Ajax的表单提交与preventDefault

问题描述

我有一个普通的HTML形式，它应该是prevent默认表单提交和阿贾克斯后的值。它不符合我的设置工作，请帮我在哪儿出了问题。见我作为新手在jQuery中，的javascrip

 ＆LT;链接相对=样式类型=文/ CSS的href =./ jQuery的多选控件Demo_files / jquery.multiselect.css＆GT;

＆LT;链接相对=样式类型=文/ CSS的href =./ jQuery的多选控件Demo_files / jQuery的-ui.css＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =./ jQuery的多选控件Demo_files / jquery.js和＆GT; ＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =./ jQuery的多选控件Demo_files / jquery.form.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =./ jQuery的多选控件Demo_files / jQuery的-ui.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =./ jQuery的多选控件Demo_files / jquery.multiselect.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{

       $（选择）。多选（{
          selectedList：4
       }）;

    }）;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR FRM = $（'＃contactForm1'）;
frm.submit（函数（EV）{
    $阿贾克斯（{
        类型：frm.attr（方法），
        网址：frm.attr（行动），
        数据：frm.serialize（），
        成功：功能（数据）{
            警报（'OK'）;
        }
    }）;

    。EV preventDefault（）;
}）;
 

我的表看起来像

 ＆LT;形式的行动= index1.php ID =contactForm1方法=邮报＆GT;
＆其中p为H.;
    ＆LT;选择名称=例如列表[]多个=多​​的风格=宽度：400像素;显示：无;＆GT;
    ＆LT;期权价值=选项1＆GT;选择1＆LT; /选项＆GT;
    ＆LT;期权价值=选项2＆GT;选项2'; /选项＆GT;
    ＆LT;期权价值=2选项＆GT;选项3'; /选项＆GT;
    ＆LT;期权价值=3选项＆GT;选项4℃/选项＆GT;

    ＆LT; /选择＆GT;
＆所述; / P＆GT;
＆LT;输入类=文本类型=提交值='GO'＆GT;
 ＆LT; /形式GT;
 ＆LT; /身体GT;
 ＆LT; / HTML＆GT;
 

解决方案

包装你的code中的

  $（函数（）{
    VAR FRM = $（'＃contactForm1'）;
    frm.submit（函数（EV）{
        $阿贾克斯（{
            类型：frm.attr（方法），
            网址：frm.attr（行动），
            数据：frm.serialize（），
            成功：功能（数据）{
                警报（'OK'）;
            }
        }）;
        。EV preventDefault（）;
    }）;
}）;
 

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

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

解决方案

Wrap your code in 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();
    });
});

这篇关于Ajax的表单提交与preventDefault的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！