使用Ajax的Django POST

Question

我有一個應用程序名稱register_login，這個應用程序管理登錄和注冊opeartions。 我在localhost：8000 /登錄頁面上有一個表單，我希望該按鈕重定向到register_login應用程序中的func，但我不能這樣做。 我是Django Framework的新手。 我怎么處理這個？

MAIN URLS.PY

from django.conf.urls import include,url
from django.contrib import admin
from register_login.views import login, register, test


urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^homepage/', include('homepage.urls')),
    url(r'^login/$', login),
    url(r'^register/$', register),
    url(r'^success/$', test),
]

登錄頁面.HTML

<form id=registerLogin style="margin-top: 30px; margin-left: 350px;">
      <header>Login</header>
      <label >Username <span>*</span></label>
      <input id="username"/>
      <label >Password <span>*</span></label>
      <input id="password"/>
      <button id="login">Login</button>
      <h1 style="margin-left: 20px;">Are you not registered?</h1>
      <button id="register">Register</button>
</form>

在這個html的末尾有我的.js文件。 我沒有忘記。

JAVASCRIPT

if (!jQuery) { throw new Error("This page requires jQuery") }


function readInput() {
    e.preventDefault();
    var userName = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    debugger

    $.ajax({
        type: "POST",
        url: "/success/",
        data: {'username':username,'password':password, csrfmiddlewaretoken: '{{ csrf_token }}'},
        dataType: 'json',
        success : function(json) {
            $('#post-text').val(''); // remove the value from the input
            console.log(json); // log the returned json to the console
            console.log("success"); // another sanity check
        },     
    }); 
}

(function ($) {

$("#login").click(function(){
    readInput();
});


})(jQuery);

最后我的功能。 它在register_login應用程序中，正如我之前所說

REGISTER_LOGIN VIEW

def test(request):
    embed()
    if request.method == 'POST':
        embed()
    return HttpResponse("hell world")

我試圖更改網址，如“/ register_login / success /”，“/ register_login / success”，“/ register_login / success / $”，“/ success /”，“success /”或“/ success / $”。 什么都行不通

我需要去那個功能，但它不會:(

Answer 1

由於您是通過ajax登錄的，因此無法在test視圖中重定向。 你可以做的是在你的ajax成功函數中添加一個重定向。 像這樣的東西：

// similar behavior as an HTTP redirect
window.location.replace("/some-url/");

要么

// similar behavior as clicking on a link
window.location.href = "/some-url/";

此外，您需要修復您的JavaScript代碼，在click處理程序中添加preventDefault並在readInput中刪除它。 您還需要刪除數據對象中的引號，並確保使用了正確的變量。 像這樣的東西：

$(function() {
    function readInput() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;

        $.ajax({
            type: "POST",
            url: "/success/",
            data: {
                username: username,
                password: password,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            dataType: 'json',
            success : function(json) {
                window.location.replace("/some-url/");
            }
        }); 
    }

    $("#login").click(function(e){
        e.preventDefault();
        readInput();
    });
});