使用表单反馈刷新模态

我在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="[email protected]" > 
     <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>

来源

2016-07-06 ballardjw2

尝试打印成功/错误变量，你有什么收获吗？检查python控制台，发布表单时什么是状态码？任何事情？ – Aakash

是的，成功和/或错误获得预期值。当我点击按钮时，控制台会显示“'POST/signup/HTTP/1.1'200 1897”。 – ballardjw2

那么，如果一切按预期进行，你到底想做什么？ “什么都没有发送回页面”是什么意思？ – Aakash

可以有多种原因。

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

从我提出的问题。您的ajax调用不会用新数据替换旧dom数据。

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

编辑：

因此，我们假设新的数据没有在DOM更换是正确的。

你需要做的是：

修改您的视图返回一个JSON如{'status': boolean, 'form': html}
修改您的JS检查返回响应的状态并更新找到这应该被替换的DOM 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/

来源

2016-07-06 19:01:01

响应选项卡完美显示所有内容。错误消息正是它应该在代码中的位置。这只是不刷新模式本身。 – ballardjw2

你可以添加js，它使得你的视图中的ajax调用以及你在'Response'选项卡中看到的响应格式？ –

信息已更新。 – ballardjw2

你Response选项卡显示为你呈现上成功的数据HTML，你应该使用JsonResponse在视图中发送数据到AJAX调用的响应。示例在AJAX调用成功时使用return JsonResponse(data)。

让我知道它是否有帮助。

来源

2016-07-06 19:20:18 Aakash

使用表单反馈刷新模态

回答

相关问题