-1

我有一个包含在 Bootstrap 模式中的登录表单，它看起来像这样。

<!-- Modal -->
<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">
  <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="submit" value="Login" class="btn btn-primary">
</form>
</div>

目前在登录时，当我提交表单时，我会被重定向到 login.php，而不是这个，我想在打开模式的站点之前进行检查。并且任何错误都应该显示在模态框内。

这是login.php。

<?php include 'includes/core/head.php' ?>
<div class="fold">
<?php include 'includes/core/header.php' ?>
<div class="container">
<?php
if(empty($_POST) === false) {
    $email = $_POST['email'];
    $password= $_POST['password'];

    if(empty($email) || empty($password)) {
        $errors[] = 'All fields required.';
    } else if(user_exists($email) === false) {
        $errors[] = 'Email not registered.';
    } else if(user_active($email) === true) {
        $errors[] = 'Eposten not activated.';
    } else {
        $login = login($email, $password);
        if ($login === false) {
            $errors[] = 'Wrong email or password.';
        } else {
            $_SESSION['user_id'] = $login;
            header('Location: site.php');
            exit();
        }
    }

    print_r($errors);
}
?>
</div> <!-- /.fold.container -->
</div>
<?php include 'includes/core/footer.php' ?>

我知道解决方案是 AJAX，但我从未使用过它。如何通过 js 调用将登录表单连接到 login.php？

4

4 回答 4

1

本质上，您需要使用 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 代码中响应它变得更容易。（它可以显示错误消息、更新某些页面内容、进行客户端重定向等）

于 2013-09-10T18:58:22.833 回答
0

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

确切的实施取决于您想要做什么。可能，您还想使用序列化（或其兄弟之一）来安排您要提交的数据。

于 2013-09-10T18:52:35.000 回答
0

首先你需要了解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 文档页面。

于 2013-09-10T18:57:11.053 回答
0

把它加到你的头上

<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'];

?>
于 2013-09-10T19:05:39.493 回答