如何使用Javascript（Ajax）將表單數據發佈到外部PHP文件？

我正在使用登錄功能創建一個Web應用程序。服務器端工作（PHP文件進行後期輸入，根據用戶數據庫進行檢查，並返回Error:Missing-Input，Error:Invalid-Credentials或Success:Logged-In）。只需簡單地發佈到PHP文件，這種方式就可以完美實現，但當提交表單時，需要應用程序靜靜地發佈數據，然後提醒'再試一次'或將頁面更改爲應用程序的主屏幕（app/index.html）。 JavaScript的我使用（和改變，改變），低於（形式：如何使用Javascript（Ajax）將表單數據發佈到外部PHP文件？

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(); 
});

的HTML格式如下（signin.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>

我知道這是一個我只是不能做任何工作

編輯：目前的JS代碼似乎被忽略。表單發佈到自身，並忽略了AJAX網址。我已經嘗試了在HTML的頂部和底部包含<script>標籤。在JS d中的PreventDefault也沒有任何區別。

編輯2：對JS的各種更改& HTML顯示我嘗試過的更多，但現在只是直接到遠程服務器（仍然忽略防止默認）。

來源

2016-09-15 jpl42

什麼是你的Ajax調用的返回？你有什麼東西嗎？ –

該表單似乎忽略了AJAX並嘗試發佈到自身（signin.html，而不是遠程服務器上的signin.php）。此外，唯一的控制檯輸出是「TypeError：document.getElementById（...）null」。 – jpl42

您的按鈕不是提交按鈕或沒有點擊功能來調用loginFunction –

問題中的代碼現在按預期工作。我錯過了jquery lib聲明，我在網上看到很多關於這個問題的問題，完全寫了Javascript，但由於某些原因代碼失敗了。如果有這樣的人瀏覽該帖子，解決方法是：

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

在HTML頁面的底部之前

<script src="myScript.js"></script> 
</body> 
</html>

來源

2016-09-15 13:39:12 jpl42

如何使用Javascript（Ajax）將表單數據發佈到外部PHP文件？

回答

相關問題