Fatal编程技术网
  • javascript/
  • Javascript 必须按下按钮才能激活php代码？

Javascript 必须按下按钮才能激活php代码？

javascript php html mysql

Javascript 必须按下按钮才能激活php代码？,javascript,php,html,mysql,Javascript,Php,Html,Mysql,因此，这个网站的想法是，当你按下按钮时，它会从数据库中删除相应的行。然而，我的代码的问题是，在第一次按下按钮后，填充id变量，然后在下一次按下按钮时执行php。我怎样才能避免这种情况，让php适应并在第一次按下按钮时执行php 包括嵌入php的HTML页面： <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=

因此，这个网站的想法是，当你按下按钮时，它会从数据库中删除相应的行。然而，我的代码的问题是，在第一次按下按钮后，填充id变量，然后在下一次按下按钮时执行php。我怎样才能避免这种情况，让php适应并在第一次按下按钮时执行php

包括嵌入php的HTML页面：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Untitled Document</title>
    <style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>

<body>
    <div class="container-fluid">
    <h2 style"text-align:center";>Please enter the item you want to add to the list below </h2>

<?php



$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
$sql = "CREATE DATABASE myDB";

$conn = new mysqli($servername, $username, $password, $dbname);


if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);
} 



$sql = "CREATE TABLE freezerinventory (
id INT AUTO_INCREMENT PRIMARY KEY, 
item VARCHAR(30) NOT NULL,
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";

if(isset($_POST['itemx'])) 

{

$itemvar = $_POST["itemx"];
$sql = "INSERT INTO freezerinventory (item)
VALUES ('$itemvar')";
    $add =  mysqli_query($conn, $sql);
}
else {
    $sql = "";
}




mysqli_close($conn);


?>

<form action="<?=$_SERVER['PHP_SELF'];?>" class="needs-validation" novalidate method="post">

    <div class="form-group">
      <label for="uname"></label>

      <input type="text" class="form-control" id="itemx" placeholder="Enter an item for the freezer here" name="itemx" required>

      <div class="valid-feedback">Valid.</div>

      <div class="invalid-feedback">Please fill out this field.</div>

    </div>

    <button id = "SubmitButton" name = "SubmitButton" type="button submit" class="btn btn-primary">Add to list</button>
</form>
    </div>








<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
$aVar = mysqli_connect('localhost','root','','myDB');


$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT * FROM freezerinventory";
$result = mysqli_query($aVar, $sql);



echo "<table><tr>
    <th>Item name</th>
    <th>Date added</th> 
    <th>remove</th>
  </tr>    "; 


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

echo "      <tr><td>" . $row['item'] . "</td><td>" . $row['reg_date'] . "</td><td><form action='

' method='POST'>
<div class= 'input-group' > <div class='input-group-append'>


                <button class='btn btn-danger'  onclick='deleteitem()'  id = 'delete' type='submit'>Remove</button>

                <input type='hidden' name='id' value=".$row['id']." />

            </div></div>

</form></td></tr>";



}
    echo "</table>";
?>

 <script>

function deleteitem (e) {

            e.preventDefault();

    <?php 



    $id = $_POST['id'];

    $delete = "DELETE FROM freezerinventory WHERE id=$id";
   $del =  mysqli_query($conn, $delete);

        ?>
        }
        else {
    }
    </script> 

<script>

function myFunction() {
  confirm("I am an alert box!");
}

</script>

<script>

(function() {
  'use strict';
  window.addEventListener('load', function() {

    // Get the forms we want to add validation styles to

    var forms = document.getElementsByClassName('needs-validation');

    // Loop over them and prevent submission

    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>




</body>
</html>
PHP是一种只在服务器端运行的语言。 它不同于在浏览器的客户端上运行的javascript

如果您注意到，您将永远不会在其他网站上看到PHP代码，因为如果网站使用PHP，它将在服务器端进行处理，并且返回的仅是HTML+CSS

现在我们不会创建这样的页面。 我们将使用PHP创建我们所称的API。我们将使用REST-API策略

假设我们将在以下地址托管此API：www.mywebsite.com/myapi/myfreezerendoint.php

我们将使用JS通过名为fetchwww.mywebsite.com/myapi/myfreezerendoint.php的简单javascript函数{…}请求或发布到此端点

我发现了这个关于使用MySQL作为数据库的PHP API的有趣教程：

我希望你喜欢！继续运行

您可以创建一个单独的处理脚本，并将表单提交到按钮的URL路径“onClick”。您不能用JS代码直接调用PHP函数。

我已经更正并美化了所有代码，将其最小化，现在应该是这样：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
$sql = "CREATE DATABASE myDB";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);
} 
$sql = "CREATE TABLE freezerinventory (
id INT AUTO_INCREMENT PRIMARY KEY, 
item VARCHAR(30) NOT NULL,
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP)";

if(isset($_POST['itemx'])) {
  $itemvar = $_POST["itemx"];
  $stmt = $conn->prepare("INSERT INTO freezerinventory (item) VALUES ('?')");
  $stmt->bind_param("s", $itemvar);
  $stmt->execute();
} else {
    //the 'itemx' post parametar isn't set, make an alert or something
}
mysqli_close($conn);
?>
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <title>Untitled Document</title>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
    <h2 style"text-align:center";>Please enter the item you want to add to the list below </h2>
<form action="<?php echo $_SERVER["PHP_SELF"];?>" class="needs-validation" novalidate method="post">

    <div class="form-group">
      <label for="uname"></label>

      <input type="text" class="form-control" id="itemx" placeholder="Enter an item for the freezer here" name="itemx" required>

      <div class="valid-feedback">Valid.</div>

      <div class="invalid-feedback">Please fill out this field.</div>

    </div>

    <button id = "SubmitButton" name = "SubmitButton" type="button submit" class="btn btn-primary">Add to list</button>
</form>
    </div>
<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
$aVar = mysqli_connect('localhost','root','','myDB');


$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

if(isset($_POST['id'])) {
  $delete = $con->prepare("DELETE FROM freezerinventory WHERE id= ?");
  $delete->bind_param("s", $_POST['id']);
  $delete->execute();
}

$sql = "SELECT * FROM freezerinventory";
$result = mysqli_query($aVar, $sql);
echo "<table><tr>
    <th>Item name</th>
    <th>Date added</th> 
    <th>remove</th>
  </tr>    "; 

while($row = mysqli_fetch_array($result))   {
  echo "      <tr><td>" . $row['item'] . "</td><td>" . $row['reg_date'] . "</td><td><form action='' method='POST'>
    <div class= 'input-group' > <div class='input-group-append'>
        <button class='btn btn-danger'  onclick='deleteitem(".$row['id'].")' id='delete'>Remove</button>
        <input type='hidden' name='id'/>
    </div></div>
    </form></td></tr>";
}
    echo "</table>";
?>
<script>
function deleteitem (id_data) {
  $.post('<?php echo $_SERVER["PHP_SELF"];?>', {id: id_data}, function(data) {
    console.log(data);  //callback data
  });
}

function myFunction() {
  confirm("I am an alert box!");
}

(function() {
  'use strict';
  window.addEventListener('load', function() {

    // Get the forms we want to add validation styles to

    var forms = document.getElementsByClassName('needs-validation');

    // Loop over them and prevent submission

    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
</body>
</html>
它可能仍然需要一些修复，我在那里留下了一些未使用的html元素，但理论上这应该可以工作。它使用ajax将数据发送到php。您不必使用ajax，但从理论上讲，这应该可以解决您的问题。如果你遇到任何问题，请在我的回答下发表评论

注意：我只是想澄清一下，我没有这样做，因此可能会有一些错误。

您尝试过使用ajax吗？您使用ajax代码的方式不对！你们的代码都在同一个页面中，所以，若你们不介意重新加载页面，你们就不需要ajax或javascript，去掉所有只保留php的代码，命名你们要删除的按钮，并用if语句检查点击的按钮。如果单击了“删除”按钮，则执行查询。请参阅此处的示例：import，如果您对sql注入非常开放，请使用准备好的语句来防止sql注入。我一直在使用嵌入式php，因为否则GET或POST函数会将我重定向到php页面。我如何在不重定向到php页面的情况下执行php？我可以知道为什么我的答案被否决了吗？我在第20行有一个错误$stmt=$conn->prepare->INSERT INTO FREEGERINVENTORY item VALUES'；我相信人们会对你投反对票，因为他们希望我在服务器端而不是客户端使用php。php是一种服务器端语言，因此不能在客户端使用，你只能向服务器端发送请求并获得响应。我会调查错误的。错误到底是怎么说的？@RichardStarZ删除了prepare和之间的->命令。那么您就有了：$stmt=$conn->prepareINSERT到冷冻库存项目值“？”；。我在回答中已经改正了。