2016-09-15 4 views
0

私はログイン機能を備えたWebアプリケーションを作成しています。サーバー側の作業(PHPファイルはポスト入力を受け取り、ユーザーデータベースに対してチェックし、Error:Missing-InputError:Invalid-Credentials、またはSuccess:Logged-In)を返します。これはPHPファイルにPOSTするだけで完璧に動作しますが、フォームが送信されたときにデータをPOSTしてから、「再試行」を警告するか、ページをアプリケーションのホーム画面(app/index.html)に変更する必要があります。私が使用(および変更、および変更)しましJavascriptが、(以下のフォームです:フォームデータをJavascript(Ajax)を使用して外部PHPファイルにPOSTする方法は?

var frm = $('#signinform'); 
frm.submit(function (ev) { 
    $.ajax({ 
     type: frm.attr('method'), 
     url: frm.attr('action'), 
     data: frm.serialize(), 
     success: function(data) { 
      if(data.includes("Success:Logged-In")){ 
       localStorage.login="true"; 
       window.location.href = "app/index.html"; 
      }else if(data.includes("Error:Missing-Input")){ 
       alert("Login error! You may have missed one of the fields."); 
      }else if(data.includes("Error:Invalid-Credentials")){ 
       alert("Login error! You have entered your email or password incorrectly."); 
      } 
     } 
    }); 
     ev.preventDefault(); 
}); 

(signin.html)を次のようにHTMLフォームがある:

<div id="container"> 
    <h1>Sign In</h1><hr><br><br> 
    <form id="signinform" method="post" action="https://somedomain.com/api/endpoint/signin.php"> 
     <div style="text-align:left; margin-left: 15px;">Email:</div><input name="email" id="email" type="email" placeholder="[email protected]" required="required" /><br><br> 
     <div style="text-align:left; margin-left: 15px;">Password:</div><input name="password" id="password" type="password" placeholder="*********" required="required" /><br> 
     <br><br><input type="submit" id="login" value="Submit" /><br><br> 
     <p>No account? <a href="signup.html">Click here to sign up!</a></p> 
    </form> 
</div> 
<script src="formhandle.js"></script> 

私は、これは知っています

EDIT:現在のJSコードは無視されているようです。フォームはそれ自体に投稿され、AJAXのURLを無視します。私は1億の質問とブログの投稿、チュートリアルなどを複製しています。 HTMLの上部と下部に<script>タグを含めてみました。JS dのPreventDefault違いはありません。

EDIT 2:JSへの様々な変更私は何を試してきたのかをHTMLで示しましたが、今はリモートサーバにまっすぐ行くだけです(まだpreventdefaultは無視しています)。

+0

前に、そして、あなたのAJAX呼び出しのリターンは何である:そのような人々は、この投稿を閲覧した場合、修正はありますか?何かを手に入れますか? –

+0

フォームはAJAXを無視して、自分自身に投稿しようとします(リモートサーバーのsignin.phpではなく、signin.html)。また、唯一のコンソール出力は 'TypeError:document.getElementById(...)is null'です。 – jpl42

+0

あなたのボタンは送信ボタンではないか、loginFunctionを呼び出すためのクリック機能がありません –

答えて

0

問題のコードが正常に機能するようになりました。私はjqueryのlib宣言が不足していた、私はこの問題に関連して、オンラインで多くの質問を見てきたが、完全にJavascriptを書いているが、何らかの理由でコードが失敗する。 HTMLページの一番下にある

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<script src="myScript.js"></script> 
</body> 
</html> 
関連する問題