Question

我正在尝试使用插件进行登录表单，其中电子邮件和密码是两个字段。虽然我有针对存储在数据库中的数据验证电子邮件和密码的代码，但只要单击提交按钮，模态就会关闭而不进行验证。在输入有效的电子邮件和密码或单击取消按钮之前，我不想退出模态。标记如下：

<!Doctype = html>
<head>
  meta data entered
</head>
<body>
<div class="modal-content">
<div class="modal-header">
<h1>Sign In</h1>
</div>
<div class="modal-content">
<form>
<input name="email" type="email">
<input name="password" type="password">
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-footer">
</div>
</div>

有人可以帮忙吗？感谢

Answer 1

接近此方法的一种方法是“捕获点击事件”，阻止默认操作并从中获取。

<script>

$('button[type="submit"]').click(function(event){

    event.preventDefault();

    $.ajax({
        success: function(data, status, xhr) {

            $('#modal-div').modal('close');

        },
        url: ...,
        type: ...,

    })
})

您需要向PHP脚本发出AJAX请求，该脚本验证来自MySQL或其他任何内容的凭据。如果登录顺利，该脚本应返回HTTP标头200，否则返回401。此HTTP请求还应该返回一个带有“OK”或类似内容的正文（不是<body>），以便在AJAX请求的成功处理程序中检查一切正常。成功处理程序（回调）也是关闭模态的适当位置。

在我的回答中研究你不理解的任何事情。阅读以下主题的介绍材料。如果您对这些概念有足够的了解，请使用您编写的代码更新您的问题。解释为什么你认为代码应该工作，并概述你的想法，为什么你认为它不起作用。这样，您将在此网站上获得帮助。

HTTP状态代码
PHP HTTP标头
PHP HTTP响应
为什么javascript是异步的
成功回调
jQuery ajax request

bootstrap modal jquery插件 - 登录

1 个答案: