如何在 jquery.post 调用中停止表单提交？答案

【问题标题】：How to Stop Form Submit on jquery.post call?如何在 jquery.post 调用中停止表单提交？
【发布时间】：2013-07-31 14:52:28
【问题描述】：

html

<form action="/jobseeker/profile/" method="post" id="langForm">     
    <input type="hidden" name="curform" value="langform">
    <div class="control-group">
        <label class="control-label">Language Name</label>
        <div class="controls">
            <input id="languageadd" maxlength="120" name="language" type="text" required/>
        </div>
    </div>
    <input class="btn btn-success" type="submit" value="save" />
</form>

jquery 脚本

$("#langForm").on("submit", function(event){    
    $.post('/jobseeker/profile/', $(this).serialize(),
    function(data){
        alert('AJAX successful');
        //CreateRow(jdata);
    }, "json"); 
    event.preventDefault(); 
});

views.py for /jobseeker/profile/

def addlang(request):
    #curform=request.POST['curform']
    md=Languages()
    for i in request.POST.keys():
        if i=='curform':continue
        setattr(md,i,request.POST[i])
    md.save()
    n={ 
            "pk": md.pk,
            "lang":md.language,
            "read":md.read,
            "speak":md.speak,
            "write":md.write            
    }
    return HttpResponse(json.dumps(n), mimetype="application/json")

当我点击提交按钮时，防止默认不工作和整个表单提交发生

【问题讨论】：

浏览器控制台是否有错误
@ArunPJohny Uncaught TypeError: Object [object Object] has no method 'ajaxForm'
@ArunPJohny Uncaught TypeError: Object [object Object] has no method 'ajaxForm' localhost:8000/jobseeker/profile/:236 (anonymous function) localhost:8000/jobseeker/profile/:236 c jquery.js:3 p.fireWith jquery.js:3 b.extend.ready jquery.js:3 H
@ArunPJohny 抱歉，我有一些拼写错误 ss

标签： javascript jquery python django post

【解决方案1】：

尝试返回 false；

 $("#langForm").on("submit", function(event){    
 $.post('/jobseeker/profile/', $(this).serialize(),
 function(data){
    alert('AJAX successful');
    //CreateRow(jdata);
 }, "json"); 
 return false;
});

【讨论】：

对不起，我有一些错字。它现在正在工作。现在我检查了return false; 它正在工作。我还检查了preventDefault 它也工作正常。两者有什么区别
return false 相当于同时调用 e.preventDefault 和 e.stopPropagation。阻止默认只是阻止像表单提交这样的默认行为并且不影响事件流。在这种情况下，event.preventDefault() 也有效，因此返回 false

【解决方案2】：

尝试删除 HTML 表单中指定的 action="/jobseeker/profile/"。

试试这个

$("#langForm").submit(function(event){    
    $.post('/jobseeker/profile/', $(this).serialize(),
    function(data){

        /* stop form from submitting normally */
        event.preventDefault();

        alert('AJAX successful');
        //CreateRow(jdata);
    }, "json"); 
    event.preventDefault(); 
});

event.preventDefault();将停止表单的默认提交。

【讨论】：

【解决方案3】：

把preventDefault()放在最上面，return false放在最后。

$("#langForm").on("submit", function (event) {
    event.preventDefault();
    $.post('/jobseeker/profile/', $(this).serialize(),
        function (data) {
            alert('AJAX successful');
            //CreateRow(jdata);
        }, "json");
    return false;
});

【讨论】：