javascript - jquery ajax调用重定向到命名url而不是相同的模板

Question

我有一个 django 表单，如下所示:

<form class="myform" action="{% url "create" %}" method="post">{% csrf_token %}
    <div class="results"></div>
    <label class="input margin-bottom-10">{{form.name}}
    <div class="name_error"></div>
    </label>
    <label class="input margin-bottom-10">{{form.age}}
    <div class="age_error"></div>
    </label>
    <input class="margin-top-10 pull-right" type="submit" value="Confirm" >
</form>

我的 jquery 是这样的:

frm = $('.myform')
frm.on('submit', function(event){
    create(frm);
});



function create(frm) {
    $.ajax({
        url : frm.attr('action'), // the endpoint
        type : frm.attr('method'), // http method
        data: frm.serialize(), // data sent with the post request

        // handle a successful response
        success : function(response) {
            if(response.status == "success"){
                var success_message = "<div>some success message</div>)
                $('#container_body').html(success_message);
            };

            if(response.status == "error"){
               frm.find('.results').html("<div class='alert alert-mini alert-danger'>"+response.message+"</div>");
            };
        },
    });
};

这里我的 ajax 调用运行良好。我得到了正确的响应，但 DOM 操作是错误的..

当我点击提交按钮时出现错误。我想在 .results 类上显示错误消息。

当出现错误时，带有错误的表单会显示一段时间然后消失，并显示带有 json 响应的 url 页面。

带有错误消息的表单没有保留并重定向到带有 json 响应的 url 页面。

这里出了什么问题

Answer 1

您的脚本存在 JS 错误，已提交。以下是您需要采取的措施来解决此问题。阅读内嵌评论。

frm.on('submit', function(event){
  event.preventDefault(); //Prevents the default action from happening and Rayon mentioned 
  create(frm);
});

修复 success 函数中的 JS 错误。请记住，JS 错误可能会导致整个应用程序失败。

 success : function(response) {
        if(response.status == "success"){
            var success_message = "<div>some success message</div>"; //This line had error in your code
            $('#container_body').html(success_message);
        } //You don't need a semicolon here

        if(response.status == "error"){
           frm.find('.results').html("<div class='alert alert-mini alert-danger'>"+response.message+"</div>");
        } //You don't need a semicolon here 
    }// You dont need the redundant comma here which will error out in IE