使用Bootstrap 3.x模式的Django用户登录的Ajax问题

Question

My purpose is once modal form submitted, ajax pass the username and password to a view and get back the json info to update the modal form, I trace the djanog code ,and 100% sure the JsonResponse(rsdic) has been executed in server side, as well as client fully receive the son info with ajax success function.

The problem is how to update the #error_message1 field which embeded in model. I tried .html() or .append(), all failed.

I leave the core coding for your reference, many thanks again for your help again.

ajax component:

 $.ajax( { type: "POST", url: url, data: { 'username': username, 'password': password }, dataType: 'json', success: function(data){ $('#login-form')[0].reset(); if (data.ret != '1107'){ var htmlcode ="<p> data.info </p>"; $('#modal').find('.error_message1').append(htmlcode); } }, error: function (data) { console.log('An error occurred.'); console.log(data); }, }); 

html component:

 <div class="modal fade" id="modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div id="form-modal-body" class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button> <h4>EXP LOGIN</h4> <form role="form" action="{% url 'auth_login' %}" method="post" id="login-form"> {% csrf_token %} <ul> <li> <div class="g-icon"><i class="iconfont icon-yonghu"></i></div> <input type="text" name="username" id="username" value="" placeholder="User name" /> </li> <li> <div class="g-icon"><i class="iconfont icon-mima"></i></div> <input type="password" name="password" id="password" value="" placeholder="Password" onblur="check1()" /> <div class="g-cue" id="error_message1">Your email or password was entered incorrectly.</div> </li> </ul> <div class="g-btn"> <input class="g-submit" id='login-button' type="submit" value="{% trans 'Log in' %}" /> <input type="hidden" name="next" value="{{ next }}" /> </div> <p><span>{% trans "Not a member?" %} <a href="{% url 'registration_register' %}">Join now.</a></span></p> </form> </div> </div> </div> </div> 

Answer 1

你有error_message1作为id不是类

$('#modal').find('#error_message1').html(htmlcode);