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

修复成功函数中的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

jquery ajax调用重定向到相同模板的被调用url

1 个答案: