2017-12-17 23 views
0

私はAJAXに変数を渡しているとき、それは私がちょうどいくつかの文字列値を持つ変数を作成する場合に動作します。 var userid = "test"var passwd = "test1"ですが、変数にvar userid = form.userid.valuevar passwd = form.passwrd.valueが含まれる場合は無効です。 form.userid.valueform.passwrd.valueはなぜ機能しないのですか?ここでAJAX呼び出しにJavascript変数を渡すことができません

は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> 

は動作しませんジャバスクリプト(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. 
       } 
     }); 
    }; 
}; 

しかし、これは動作します私はハードユーザー名とパスワード(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. 
       } 
     }); 
    }; 
}; 
+0

"うまくいかない"とは何ですか?要求の前に変数の値をconsole.log()しようとしてください。たぶん 'form.userid.value'と' form.pswrd.value'はnullか未定義です。また、Google Chromeデベロッパーツールの[ネットワーク]タブで、リクエストのペイロードに実際に送信された内容を確認することもできます。 – molerat

+0

Blah。試して2時間後、閉じたブラウザ、再オープンし、それは動作します。ごめんなさい。 – shaz

答えて

-1

閉鎖して再オープンした参照r。それがなぜ必要なのか分かりません。

関連する問題