PHP/AJAX 登录表单

本质上，您需要使用 JavaScript 来拦截表单帖子并使用 AJAX 执行逻辑。 因此，您可以从拦截提交按钮的点击事件开始：

$('input[type=submit]').click(function (e) {
    // This is where the AJAX logic would go
    e.preventDefault();
});

到目前为止，所有这些工作都是拦截按钮的单击事件并阻止它提交表单。 当然，如果页面上其他表单中还有其他提交按钮，那么您需要使用id或其他方式在jQuery选择器中唯一标识此按钮。

截获表单帖子后，可以使用 AJAX 调用手动发布它。 像这样：

$('input[type=submit]').click(function (e) {
    $.post('login.php', $('form').serialize())
    .done(function(data) {
        // There is where you handle the response
    });
    e.preventDefault();
});

此更新的代码正在做几件事。 它正在序列化表单中的数据（同样，如果存在或可能有更多表单元素，请使用更具体的选择器），并在 POST 请求中将该数据发送到 login.php . 然后，它使用 .done() 函数作为来自该 AJAX 请求的响应的回调。

从login.php服务器端代码的角度来看，基本上没有区别。 它将完全像普通帖子一样响应此 AJAX 请求。 因此，这是您必须进行一些更改的地方，因为目前看起来login.php在成功登录后执行重定向。 而且您不会通过 AJAX 响应重定向。

因此，此时您需要确定您希望系统在 AJAX 登录时的行为方式。 我建议您发布到不同的服务器端资源，该资源返回 JSON 数据而不是重定向或页面，然后data该回调函数将只包含该结果数据。 这将使在 JavaScript 代码中更容易响应它。 （它可能会显示错误消息、更新某些页面内容、执行客户端重定向等）

请参阅 jQuery ajax 以获取有关该主题的完整库和文档。

确切的实现取决于您要执行的操作。您可能还需要使用序列化（或其同级之一）来排列要提交的数据。

首先，你需要了解ajax是做什么的。这是w3schools的一个例子。

在此示例中，html 页面制作了一个简单的帖子，其中包含 2 个要demo_test_post.asp的参数。返回时，demo_test_post.asp将一个字符串返回给 jquery ajax 并显示该字符串。

关于ajax HTTP POST的简要说明，你可以在这里阅读。

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
     name:"Donald Duck",
     city:"Duckburg"
  },
  function(data,status){
     alert("Data: " + data + "'nStatus: " + status);
  });
});

如果您需要有关什么是jquery ajax的更多详细信息，可以参考此处的jquery doc页面。

把它添加到你的脑海中

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        $("#submit").click(function () {
                $.ajax({
                    type: "POST",
                    data: $('#form1').serialize(),
                    url: "login.php",
                    success: function (msg) {
                      alert(msg);
                    }
                });
            });
    });
</script>

并且您编辑的 html 是

.html

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Logga in</h4>
</div>
<div class="modal-body">
<form action="login.php" method="post" class="form-horizontal" role="form" id='form1'>
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-3 control-label">Email</label>
    <div class="col-lg-9">
      <input type="email" name="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword1" class="col-lg-3 control-label">Lösenord</label>
    <div class="col-lg-9">
      <input type="password" name="password" class="form-control" id="inputPassword1" placeholder="Lösenord">
    </div>
  </div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Register</button>
<input type="button" value="Login" class="btn btn-primary" id='submit'>
</form>
</div>

登录.php

<?php
$data=$_POST['serialize'];
$email = $data['email'];
$password= $data['password'];
?>