form表单和ajax提交的重复

form表单和ajax提交的重复

form表单中input的submit类型和button按钮都会触发两次（有ajax的情况），当我们把input的type改成button类型就不会朝后端再发送POST请求了

<form action="" method="post">
    用户名：<input type="text" name="username" id="id_user">
    密码：<input type="text" name="password" id="id_pwd">
     # 关键点就在下边这一行
{#    <input type="submit" value="提交" id="id_submit">   如果这里的type是submit类型那么会向后端发送两次请求 一次POST 一次ajax#}
    <input type="button" value="ajax提交" id="id_submit">   # 当我们把input的type类型改成button 那么我们绑定ajax事件后 就不会朝后端再发送form表单的POST请求了 而是ajax请求
    <input type="submit" value="post提交">   {# 把id取消掉就只会提交post请求 #}
</form>

<script>
    $('#id_submit').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json',  # 这里我要发送的是JSON格式 所以必须指定编码格式
            data:JSON.stringify({'username':$('#id_user').val(), 'password':$('#id_pwd').val()}),
            success:function (args) {
                console.log(args)
            }
        })
    })
</script>