将Javascript变量传递给AJAX调用不起作用

时间:2022-08-25 18:30:18

When i am passing a variable to AJAX it works if i just create a variable with some string values e.g. var userid = "test" and var passwd = "test1" but not when the variable contains var userid = form.userid.value and var passwd = form.passwrd.value. Why does form.userid.value and form.passwrd.value not work?

当我将变量传递给AJAX时,如果我只是创建一个带有一些字符串值的变量,那么它就可以工作。 var userid =“test”和var passwd =“test1”但不是当变量包含var userid = form.userid.value和var passwd = form.passwrd.value时。为什么form.userid.value和form.passwrd.value不起作用?

Here is the HTML:

这是HTML:

<html>
    <head>
        <title>
        Login page
        </title>
        <script src="login.js"></script>
        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <!-- jQuery -->
        <script src="./jquery.rest.min.js"></script>
        <script src="./webtoolkit.base64.js"></script>
    </head>
    <body>
        <h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
        color:#00FF00;>
        Simple Login Page
        </h1>
        <form name="login">
            Username<input type="text" name="userid"/>
            Password<input type="password" name="pswrd"/>
            <input type="button" onclick="checkLogin(this.form)" value="Login"/>
            <input type="reset" value="Cancel"/>
        </form>
    </body>
</html>

Here is the javascript which does not work (login.js):

这是javascript不起作用(login.js):

function checkLogin(form) {
    var auth_token = localStorage.getItem("token");

    //the variables which do not correctly pass through to AJAX call
    var userid = form.userid.value;
    var passwd = form.pswrd.value;

    if(auth_token == null) {
        $.ajax({
                type: 'POST',
                data: {
                username: userid,
                password: passwd
                },
                url: 'http://127.0.0.1:8000/api/v1/api-token-auth/',
                success: function(res){
                        var tok = res.token
                        localStorage.setItem("token", JSON.stringify(tok));

                }});
    } else {
        $.ajax({
            type: 'POST',
            headers: {
                'Authorization':'token ' + JSON.parse(auth_token)
            },
            data: {
                quote_text: "Test Javascript with variable token pt 2",
                tags: '["test", "javascript"]'
            },
            url: 'http://127.0.0.1:8000/api/v1/test/',
            success: function(res){
                console.log(res)  //answer of api call.
                }
        });
    };
};

However this will work where i have hard coded the username and password (login.js):

但是,这将在我硬编码用户名和密码(login.js)的地方工作:

function checkLogin(form) {
    var auth_token = localStorage.getItem("token");

    //hard coded variable content which works.
    var userid = "test";
    var passwd = "test1";

    if(auth_token == null) {
        $.ajax({
                type: 'POST',
                data: {
                username: userid,
                password: passwd
                },
                url: 'http://127.0.0.1:8000/api/v1/api-token-auth/',
                success: function(res){
                        var tok = res.token
                        localStorage.setItem("token", JSON.stringify(tok));

                }});
    } else {
        $.ajax({
            type: 'POST',
            headers: {
                'Authorization':'token ' + JSON.parse(auth_token)
            },
            data: {
                quote_text: "Test Javascript with variable token pt 2",
                tags: '["test", "javascript"]'
            },
            url: 'http://127.0.0.1:8000/api/v1/test/',
            success: function(res){
                console.log(res)  //answer of api call.
                }
        });
    };
};

1 个解决方案

#1


-1  

Closed and reopened browser. No idea why that was necessary.

关闭并重新打开浏览器。不知道为什么那是必要的。

#1


-1  

Closed and reopened browser. No idea why that was necessary.

关闭并重新打开浏览器。不知道为什么那是必要的。