私はログイン機能を備えたWebアプリケーションを作成しています。サーバー側の作業(PHPファイルはポスト入力を受け取り、ユーザーデータベースに対してチェックし、Error:Missing-Input
、Error: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は無視しています)。
前に、そして、あなたのAJAX呼び出しのリターンは何である:そのような人々は、この投稿を閲覧した場合、修正はありますか?何かを手に入れますか? –
フォームはAJAXを無視して、自分自身に投稿しようとします(リモートサーバーのsignin.phpではなく、signin.html)。また、唯一のコンソール出力は 'TypeError:document.getElementById(...)is null'です。 – jpl42
あなたのボタンは送信ボタンではないか、loginFunctionを呼び出すためのクリック機能がありません –