javascript - 关于用Ajax提交表单的问题

问题描述

问 题

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=""的原因吗

解决方案

对的,因为form的关系。

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

2. 使用form的submit事件

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

preventDefault() 方法

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