如何使用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文件？

回答

相关问题