Question

我目前正在尝试使用HTML表单和POST请求来实现基本身份验证系统。当我按下按钮将信息发送到服务器时，页面将重定向到自身，但序列化表单输入附加到URL。

例如：输入的用户名和密码为＆＃39; username＆＃39;和＆＃39;密码＆＃39;分别。该页面来自

www.example.com/index.html

到

www.example.com/index.html?username=username&password=password

我有完全相同的代码在另一个页面中正常工作。我还尝试将其移至三个不同的Web服务器，以查看是否存在问题。

以下代码：

HTML表单：

<form id='loginForm'>
    <input type='text' name='username' placeholder='Username'>
    <input type='password' name='password' placeholder='Password'>
    <button onClick='login()'>Log In</button>
</form>

JavaScript的：

function login(){
    $.post('mobile_php/login.php', $('#loginForm').serialize(), function(data){
        //code handling data in here        
     });
}

的login.php

<?php
    echo "success";
?>

当我使用调试器查找发生的情况时，永远不会输入回调函数。浏览器进入$.post调用，但随后跳过它的主体并完成。我目前正在使用Chrome，但我在Firefox中测试过并遇到了同样的问题。

有一点需要注意的是，当我在Chrome开发者工具控制台中打开“网络”标签时，会显示login.php请求被取消。

Answer 1

问题是因为您的表单是以正常方式提交的，默认情况下是get，这就是查询字符串出现的原因。

您需要将JS代码附加到submit本身的form事件，而不是单击按钮。试试这个：

<form id="loginForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button>Log In</button>
</form>

$('#loginForm').submit(e) {
    e.preventDefault(); // stop the normal form submission as you are using AJAX.
    $.post('mobile_php/login.php', $(this).serialize(), function(data){
        //code handling data in here        
    });
});

jQuery $ .post将表单输入放在url中

1 个答案: