Question

我正在创建一个具有登录功能的Web应用程序。服务器端工作（PHP文件接受后置输入，根据用户数据库进行检查，并返回Error:Missing-Input，Error:Invalid-Credentials或Success:Logged-In）。只需简单地POST到PHP文件就可以正常工作，但我需要应用程序在提交表单时静默地POST数据，然后提醒“再试一次”或将页面更改为应用程序的主屏幕app/index.html ）。我使用（并更改和更改）的Javascript位于下方（表单：

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@domain.com" 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 URL。我尝试在HTML的顶部和底部添加<script>标记。 JS中的PreventDefault也没有任何区别。

编辑2：对JS＆amp ;;的各种变化HTML显示我尝试了更多，虽然现在直接进入远程服务器（仍然忽略防止默认）。

Answer 1

问题中的代码现在按预期工作。我错过了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>

如何使用Javascript（Ajax）将表单数据发布到外部PHP文件？

1 个答案: