使用Ajax的Django POST

Question

我有一个app name 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 app中，正如我之前所说的那样

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();
    });
});