jQuery $.post 将表单输入放入 url答案

【问题标题】：jQuery $.post putting form input in urljQuery $.post 将表单输入放入 url
【发布时间】：2014-06-05 18:38:50
【问题描述】：

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

例如：输入的用户名和密码分别是“用户名”和“密码”。该页面来自

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 开发者工具控制台中打开 Network 选项卡时，它显示 login.php 的请求已取消。

【问题讨论】：

标签： jquery http-post

【解决方案1】：

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

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

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

【讨论】：