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

Question

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(); 
});

/jobseeker/profile/ 的views.py

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

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

Answer 1

尝试返回 false；

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

Answer 2

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

尝试这个

$("#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(); 将停止表单的默认提交。

Answer 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;
});