如何为成功的Jquery检查，验证和重定向编写正确的代码

Question

我在过去7-8年中为php工作。 但是我从来没有尝试过ajax，jquery或javascript，而是非常简单地复制粘贴工作。现在我需要jquery来完成我的工作。我几乎完成了所有工作，除了使用密码进行登录外。 所以我尝试为此编写php和jquery代码。

这是我的代码： index.php

<html>
<head>
    <script>
        function login() {
            // get values
            var db = $("#db").val();
            var pass = $("#pass").val();
            // Check record
            $.post("check.php", { db: db, pass: pass }, function (data) {
                if (data.status=='s') //status is proper of the json object, which we gave in php code 
                {
                    var form = $('<form action="success.php" method="post">' +
                        '<input type="text" name="db" value="new1" />' +
                        '<input type="text" name="pass" value="12345" />' +
                        '</form>');
                    $('body').append(form);
                    form.submit();
                } else {
                    alert( "status: " + data );
                }
                // close the popup
                $("#pass").modal("hide");
                // clear fields from the popup
                $("#pass").val("");
            });
        }
    </script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body style="color:#ece9e9;background:#184C5D;"><div style="margin-top:25%; margin-left:25%; margin-right:auto;">
    <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "new1";
        $conn = new mysqli($servername, $username, $password, $dbname);
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        } 
        echo '<button class="btn btn-success" data-toggle="modal" data-target="#pass">Login</button><br/><br/>';
        $conn->close();
    ?>
    </div>
    <!-- Modal - login -->
    <div class="modal fade" id="pass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Enter Password</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="pass">Password</label>
                        <input type="text" name="pass" id="pass" placeholder="pass" class="form-control"/>
                    </div>
                    <?php  echo '<input type="hidden" name="db" id="db" value="'.$dbname.'">'; ?>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary" onclick="login()">Login</button>
               </div>
           </div>
       </div>
   </div>
   <!-- // Modal -->
</body>
</html>

这是check.php的代码

<?php 
    $server = "localhost";
    $username = "root";
    $password = "";
    $dbname = "$_POST[db]";
    $pass = "$_POST[pass]";
    $conn = new mysqli($server, $username, $password, $dbname);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 
    $dpass ="";
    $sql = "SELECT pass FROM project WHERE id ='1' ";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $dpass = $row["pass"];
        }
    } else {}
    if ($pass == $dpass) {
        echo "s";
    } else { 
        echo "xx";
    } 
    $conn->close();
?>

我的问题是，尝试使用正确的密码[12345]在警报弹出窗口中显示xx时。 谁能找到我想念的东西？ 因为我从3个不同的来源写了那个jQuery代码。 另一方面，当我用一个简单的发布方法页面测试check.php时，它的工作。 表示check.php没问题。

Answer 1

您有2个具有id =“ pass”的HTML元素：

第47行：

<div class="modal fade" id="pass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

和第57行：

<input type="text" name="pass" id="pass" placeholder="pass" class="form-control" />

因此，从第8行开始的var pass将采用它将遇到的ID为'pass'的第一个元素的值。 在这种情况下，这将是第47行的div。

Answer 2

正如@jeroen van der Hel所说，我有2个HTML元素，其ID为“ =“ pass”。 所以首先我需要将通行证更改为任何东西，例如通行证

<div class="modal fade" id="passtab" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

然后最主要的是响应包含空格。 所以我会在通过jquery trim函数进行检查之前修剪响应。

if (data.status=='s')

至

if ($.trim(data) == 's' )

为什么响应中包含空格。 您可以在这里找到答案

Ajax响应之前的空间（jQuery，PHP）

2. 奇怪的是，ajax响应包含空格

Ajax响应中的尾随空格

如何为成功的Jquery检查，验证和重定向编写正确的代码

问题描述

2 个解决方案

解决方案1
0 2017-09-22 23:30:03

解决方案2
0 已采纳 2017-09-24 16:22:16

如何为成功的Jquery检查，验证和重定向编写正确的代码

问题描述

2 个解决方案

解决方案1 0 2017-09-22 23:30:03

解决方案2 0 已采纳 2017-09-24 16:22:16

解决方案1
0 2017-09-22 23:30:03

解决方案2
0 已采纳 2017-09-24 16:22:16