我尝试用ajax局部刷新html，但是不起作用

Question

我正在尝试使用Ajax在本地加载页面，但是以下代码不起作用。我的想法是将“视图”的“ MSG”信息传递给Ajax并在本地刷新页面而不加载整个页面。如果输入不符合要求，则前端拒绝提交并给出提示消息。

views.py

def login(request):
    hashkey = CaptchaStore.generate_key()
    image_url = captcha_image_url(hashkey)
    captcha = {'image_url': image_url, 'hashkey':hashkey}
    if request.POST:
        username = request.POST['username']
        password = request.POST['password']
        key = request.POST['hashkey']
        capt = request.POST['captcha']
        if username and password:
            if captchautil.is_valid(capt, key):
                user = auth.authenticate(username=username, password=password)
                human = True
                if user:
                    auth.login(request, user)
                    return redirect('/')
                else:
                    msg = '用户名密码错误'
            else:
                msg = '请输入正确的验证码'
        else:
            msg = '请输入用户名与密码'
        return render(request, 'login.html', locals())
    return render(request, 'login.html', locals())

login.html

{% block content %}
<div id="login" class="login">
<form action="/login/" method="post" class="navbar-form">
{% csrf_token %}
<div id="input" class="form-group">
<input type="username" name="username" class="form-control" placeholder="请输入手机号或邮箱" id='user' title="请输入手机号或邮箱"><br><br>
<input type="password" name="password" class="form-control" placeholder="密码" id='pwd' title="请输入密码"><br><br>
<img src="{{image_url}}" alt='验证码' id='id_captcha'>
<span><a href="#" id="refresh_captcha">看不清验证码？刷新</a></span>
<br>
<input  id='captcha' placeholder="请输入验证码" name="captcha" class="form-control" type="text" data-toggle="tooltip" data-placement="bottom" title="请输入验证码">
<input value="{{hashkey}}" type="hidden" name="hashkey" id='hashkey'>
<br>
<button type="submit" class="btn btn-primary form-control" name="click" id='click'>登录</button>
</div>
<p style="margin-left: auto;" id="msg">{{ msg }}</p></div>
</form>

<div style="margin-left: 3%">
<span>
<a href="">忘记密码了?</a>
</span>
<span style="margin-left: 3%"><a href="/regist/">免费注册</a></span>
</div>
</div>
{% endblock %}

{% block lastscript %}
<script type="text/javascript">
$(document).ready(function(){
    //刷新验证码
    $('#refresh_captcha').click(function(){
        $.getJSON("/refresh_captcha/", function(result){
            $('#id_captcha').attr('src', result['image_url']);
            $('#hashkey').val(result['hashkey'])
        });
    });
});
$(function(){
    $("#click").submit(function(){
        var username = $("#user").val();
        var password = $("#pwd").val();
        var captcha = $("#captcha").val();
        var key = $("#hashkey").val();
        $(this).ajaxSubmit({
            type:'post',
            url: '/login/',
            dataType: 'text',
            data:{'username':username, "password":password, "capt":captcha, "key":key},
            success:function(msg){
                $("#msg").html(msg);
            }
        });
        return false;       
    })
})
</script>
{% endblock %}

我没有发现问题出在哪里。如果您知道，请帮助我

Answer 1

如果您正在动态获取表单，并且如果您试图说自己的javascript click函数无法正常工作，则应尝试以下操作。

 $(document).on("click","#test-element",function() {
});

而不是正常点击或提交事件$（“＃click”）。submit（function（）{

据我所知，如果您要创建动态元素，那么jquery的常规click事件将无法正常工作。您需要编写点击事件并添加上面的内容。