javascript - 使用 Ajax 的 Django POST

Question

我有一个名为 register_login 的应用程序，该应用程序管理登录和注册操作。我在 localhost:8000/login 页面上有一个表单，我希望该按钮重定向到 register_login 应用程序中的我的函数，但我不能这样做。我是 Django 框架的新手。我该如何处理这个问题？

主要网址.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 查看

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 View 中重定向。您可以做的就是在 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 代码，在点击处理程序中添加 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();
    });
});