使用表單反饋刷新模態

我在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

使用表單反饋刷新模態

回答

相關問題