打卡系统 PHP、Ajax、Mysql答案

【问题标题】：Clocking in system PHP, Ajax, Mysql打卡系统 PHP、Ajax、Mysql
【发布时间】：2019-11-28 16:57:50
【问题描述】：

我正在尝试编写一些代码，让我的同事能够打卡/打卡。首先，他们选择他们出生的月份，然后显示该月份的所有名称。此数据是从数据库中检索的。

这一切都与这个代码一起工作（我从这个网站得到了大部分）-（index.html）（这部分工作，并将根据数据库中的月份显示正确的用户列表。

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","show.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>

<body>
<form>
<h3 align="center">To clock in / out please select the month you were born</h3>
  <div class="wrapper">         
  <div class="row top-buffer">          
    <input class="btn col-md-2" value="January" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="February" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="March" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="April" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="May" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="June" type="button" onclick="showUser(this.value)">
    </div>
  <div class="row top-buffer">          
    <input class="btn col-md-2" value="July" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="August" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="September" type="button" onclick="showUser(this.value)">        
    <input class="btn col-md-2" value="October" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="November" type="button" onclick="showUser(this.value)">
    <input class="btn col-md-2" value="December" type="button" onclick="showUser(this.value)">
    </div>
  </div>
  </form>
<br>
<div id="txtHint"><b></b></div>

但是，当他们选择他们的名字时，我需要它来调用一个 PHP 文件，该文件将该名字写回链接数据库。

show.php -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$("#submit").click(function(){
var fullname=$("#submit").val();
$.ajax({
                    url:"insert.php",
                    type:"POST",
                    data:fullname,
                   success:function(data){
                       alert(data);
                       window.location.href = url;  
                   }
                });
                });
                });
</script>



</head>
<body>

<?php
$q = ($_GET['q']);

$con = mysqli_connect('x','x','x','x');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"xxx");
$sql="SELECT * FROM clock WHERE month = '".$q."'";
$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_array($result)) {

    echo "<div class=\"col-md-2\"><input type=\"Submit\" id=\"submit\" value= '". $row['fullname'] ."' name=\"submit\" ></div>" ;

}

mysqli_close($con);
?>
</body>

根据我的测试，按他们的名字这根本不是调用 insert.php。更不用说发送名称值了。然而，它正在刷新页面。

很多代码都是使用不同问题的答案和我有限的编码知识生成的。

任何帮助将不胜感激。

【问题讨论】：

页面上有多个具有相同 ID 的元素。这行不通。您也容易受到 SQL 注入攻击；该数据库代码不安全。为什么你的第一个 Ajax 请求不像你的第二个那样使用 jQuery？
另外，您不会在 POST 请求中发送任何可用的内容。而且您不能只是在您的 Ajax 响应中发回 jQuery 代码并期望它能够工作。所有客户端代码都需要在您的第一页上，并且应该通过初始 GET 请求的回调添加事件处理程序。
我强烈建议您在重新开始之前了解这些内容的工作原理，而不仅仅是复制和粘贴您不理解的内容。

标签： php jquery mysql ajax

【解决方案1】：

使用 preventdefault();这将阻止默认的表单操作或刷新页面。

  $("#submit").click(function(e){
    e.preventdefault()
    var fullname=$("#submit").val();
    $.ajax({
             url:"insert.php",
             type:"POST",
             data:fullname,
             success:function(data){
              alert(data);
              window.location.href = url;  
            }
           });
         });
     });

【讨论】：