关于用Ajax提交表单的问题

Question

HTML部分

                <form method="post" action="">
                    <div class="form-group">
                        <label>你的称呼：<span id="errorInfo1" class="errorInfo"></span></label>
                        <input type="text" class="form-control" id="name"/>
                    </div>
                    <div class="form-group">
                        <label>个人网站：</label>
                        <input type="url" class="form-control" id="url"/>
                    </div>
                    <div class="form-group">
                        <label>评论内容：<span id="errorInfo2" class="errorInfo"></span></label>
                        <textarea class="form-control" id="content"></textarea>
                    </div>
                    <input id="submit" type="submit" class="btn btn-primary" value="commit"></input>
                    <label><span id="errorInfo3" class="errorInfo"></span></label>
                </form>

JS部分

var button = $("#submit");
button.submit(function(){
    jQuery('form').serialize();
    $.ajax({
        type:"post",
        url:"action.php",
        data:{
            name:$("#name").val(),
            urlAdd:$("#url").val(),
            content:$("#content").val()
        },    
        dataType:'json',
        success:function(data){
            $(".errorInfo").html("");
            $("#errorInfo"+data.code).html(data.msg);
        },
        error:function(jqXHR){
            alert(jqXHR.status);
        }
    })
});

我点击按钮提交，页面好像会自动刷新，JS的ajax根本执行不到...,是因为我在html里写了一个form action=""的原因吗

Answer 1

对的,因为form的关系。

1. 去掉form使用普通的button点击事件提交数据

2. 使用form的submit事件

$( "form" ).submit(function( event ) {
  event.preventDefault(); // 阻止默认事件
});

preventDefault() 方法

Answer 2

其实既然你要用ajax,不如把form改成div

Answer 3

如果你要用ajax提交的话，那么将form表单去掉，或者就用form表单直接提交就是了何必再加上个ajax呢

<form method="post" action="action.php">
                    <div class="form-group">
                        <label>你的称呼：<span id="errorInfo1" class="errorInfo"></span></label>
                        <input type="text" class="form-control" id="name"/>
                    </div>
                    <div class="form-group">
                        <label>个人网站：</label>
                        <input type="url" class="form-control" id="url"/>
                    </div>
                    <div class="form-group">
                        <label>评论内容：<span id="errorInfo2" class="errorInfo"></span></label>
                        <textarea class="form-control" id="content"></textarea>
                    </div>
                    <input type="submit" class="btn btn-primary" value="commit"></input>
                    <label><span id="errorInfo3" class="errorInfo"></span></label>
                </form>

Answer 4

你可以阻止表单的提交return false;

Answer 5

最简单的 把input的type改成button