Question

我在Django中使用模态作为注册表单。我想要发生的是要检查输入并刷新表单以指示注册成功，或者抱怨哪个输入丢失或不正确。据我所知，从我使用的代码中可以看出，如果我使用常规页面，这种格式是正确的，但它不适用于模态。当我点击按钮时，东西肯定会在幕后得到确认（并且数据库正在更新，所以这一切都很好），但最后没有任何内容被发送回页面。

@requires_csrf_token
def signup(request):
error, success = '', ''

    recap = request.POST.get('g-recaptcha-response')
    [ETC]

    if request.method == 'POST':
        [CHECKING INPUTS]

    if not error:
        [OTHER STUFF]
        success = "SUCCESS MESSASGE"

    return render(request, 'signup_modal.html',
        { 'firstname': firstname,
          'lastname': lastname,
          'email': email,
          'phone': phone,
          'error': error,
          'success': success})

我猜测问题最后是返回渲染请求位。

非常感谢。

ETA：

使用Javascript：

<script type="text/javascript">
$(function() {
$(".submit-signup").on("click", function() {
        var data = $("#signup-form").serialize();
        $.post("/signup/", data, function() {

        });
    });
});
</script>

响应标签：

<form id="signup-form">

  <input id="id_firstname" type="text" name="firstname" placeholder="First name"
      value="firstname" >
  <input id="id_lastname" type="text" name="lastname" placeholder="Last name"
      value="lastname" >  
  <input id = "id_email" type="email" name="email" placeholder="e-mail"
      value="user@gmail.com" >
      <input id="id_password" type="password" name="password" placeholder="Password">
  <input id="id_password_repeat" type="password" name="password_repeat" placeholder="Repeat password">
  <div class="g-recaptcha" data-sitekey="KEY"></div>

  <p class="success-message">  </p>
  <p class="error-message">  Couldn't verify reCAPTCHA. Refresh the page and try again?  </p>

  <button type="button" class="submit-signup">Sign up</button>         
  </div>
  </form>

Answer 1

可能有多种原因。

您的数据未按预期返回。
您的xhr调用不会将当前dom数据替换为返回的数据。

从我对这个问题的看法。您的ajax调用不会用新数据替换旧的dom数据。

为了验证这一点。启动Chrome控制台。转到Networks，然后点击您的注册按钮。找到发送的请求。很可能你正在处理ajax（xhr）请求。选择该请求并切换到Response选项卡，检查返回的数据是否符合预期。

问题更新后编辑：

因此，我们假设新数据未在dom中替换是正确的。

您需要做的是：

修改视图以返回json，例如{'status': boolean, 'form': html}
修改您的JS以检查返回的响应的状态，并更新查找dom div，该div应替换为您要返回的html。

例如：

视图看起来像：

def signup(request):
    # do your stuff
    html = render_to_string(YOUR_TEMPLATE, YOUR_CONTEXT)
    response = {'status': true, 'form': html}
    return JsonResponse(response)

你的JS会在ajax调用中包含这个：

success: function(response) {
    if (response['status'] == 'true') {
        target = $('#FIND_YOUR_MODAL_DIV_BY_ID')
        data = response['form'];
        target.html(data);
    }
}

您尝试完成的事情的一个好资源：https://impythonist.wordpress.com/2015/06/16/django-with-ajax-a-modern-client-server-communication-practise/

Answer 2

您的Response标签显示html，因为您在成功时呈现数据，您应该在视图中使用JsonResponse来发送数据以响应AJAX调用。示例在AJAX调用成功时使用return JsonResponse(data)。

如果有帮助，请告诉我。

刷新模态与表单反馈

2 个答案: