Question

我有一个登录表单，用于向服务器提交名称和密码并获得json响应并将“登录”按钮更改为“注销”按钮。下面的代码将我带到访问MySQL数据库的php页面，它停留在那里，反对在后台执行所有操作。有什么解释吗？

这是我的jQuery

$('#loginbutton').click(function(event) {
event.preventDefault();
    $.post( 'phpcodes.php', $('#loginform').serialize(), function(data) {
         ...do something here
       },
       'json' 
    );
});

这是我的表格：

<div id="login" class="menubutton">LOGIN</div>
<div id="loginfields">
  <form action="phpcodes.php" id="loginform" method="post">
  <input type='text' name='username' placeholder='Username' required>
  <input type='text' name='password' placeholder='Password' required>
  <input type='hidden' name='sort' value='1000'>
  <button id='loginbutton' class="menubutton">LOG IN</button>
  </form>
</div>

这是我的php：

<?php
include 'connect.php';
if($_POST[sort]==1000)
{
$_POST[username] = filter_var($_POST[username], FILTER_SANITIZE_STRING);
$_POST[password] = filter_var($_POST[password], FILTER_SANITIZE_STRING);
$result = mysql_query("SELECT name FROM users where name ='$_POST[username]' and password='$_POST[password]'"); 
while($row = mysql_fetch_array($result))
{
$listings_results[] = array(
    'user'=>$row[name],
                        );
$_SESSION[user]=$row[name];
}
mysql_close($connection);
$results[results] = $listings_results;
// send the encoded results;
$json = @json_encode($results);
echo $json;
}
?>

我在php页面上得到的答案是正确的但它应该在后台传输到我的原始页面并显示在id为“login”的div中。

Answer 1

您实际上不希望按钮上显示type="submit"，因为您不希望浏览器提交表单。如果您将其更改为type="button"，则表示不会提交表单，您也不会离开当前页面。

接下来，从处理程序中删除return false，你应该拥有你想要的东西。

您可以在表单中添加onsubmit="return false"以停止提交输入，或者您可以使用表单标记以外的其他内容来包含输入。但是，如果您没有使用表单标记，则必须在单击处理程序中显式选择要序列化的输入，而不是像在原始代码中一样选择表单元素。

Answer 2

在执行ajax请求之前，你返回false，这肯定会成为一个问题。此外，您将要为您的点击处理程序提供一个参数，例如＆＃39; e＆＃39;，这样您就可以在click事件上调用preventDefault（）。

return false和event.preventDefault（）不起作用

2 个答案: