Question

我正在使用Javascript创建一个PHP页面。我创建了一个HTML表单，并称为代码的PHP部分。当我显示JSON数组时，我可以看到显示的元素一毫秒，然后页面刷新到初始页面。代码有效，但我不想自动刷新。我该怎么做？

HTML：

<div data-role="collapsible">
  <h1>ADD INVNTORY</h1>
  <form action='<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>' method="post">
    <fieldset>
      <legend>
        <span class="number">1</span>
        Your basic info
      </legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="product_name"/> 
      <label for="serial">Serial number:</label>
      <input type="text" id="serial" name="serial"/>
      <label for="amount">Amount:</label>
      <input type="number" id="amount" name="amount"/>  
      <input type="submit" name="submit1" value="Submit"/>
    </fieldset>
  </form>
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <div data-role="collapsible">
    <h1>VIEW ALL</h1>
    <fieldset>
      <legend>
        <span class="number">1</span>
        Current Inventory list
      </legend>
      <input type="submit" name="submit2" value="Show all">
      <div data-role="popup" id="myPopup" class="ui-content">
        <h1 id="here"></h1>
      </div>
    </fieldset>
  </div>
  <div data-role="collapsible">
    <h1>VIEW INVENTORY DETAILS(GRAPH)</h1>
    <fieldset></fieldset>
  </div> 
  <button type="submit">Sign Up</button>
</form>

PHP：

<?php
  if (isset($_POST['submit1'])) {
    $nname = "";
    $sserial = "";
    $aamount = "";
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if (empty($_POST["product_name"])) {
        {
          echo "Name is required";  
          break;
        }
      } else {
        $nname = test_input($_POST["product_name"]);
      }
      if (empty($_POST["serial"])) {
        {
          echo "Serial code is required";
          break;
        }
      } else {
        $sserial = test_input($_POST["serial"]);
      }
      if (empty($_POST["amount"])) {
        {
          echo "Amount is required";
          break;
        }
      } else {
        $aamount = test_input($_POST["amount"]);
      }
      insertdata($nname,$sserial,$aamount);
    }
  }
  function test_input($data) {
    return $data;
  }
  function insertdata($nname,$sserial,$aamount) {
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "mydb";
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
    } 
    $sql = "INSERT INTO inventory_list (name, serialno, amount)  VALUES ('$nname', '$sserial', '$aamount')";
    if ($conn->query($sql) === TRUE) {
      echo "New record created successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
    $conn->close();
  } 
  if (isset($_POST['submit2'])) {
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "mydb";
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
    } 
    $sql = "SELECT * from inventory_list";
    $result = $conn->query($sql);
    $return_arr=array();
    if ($result->num_rows > 0) {
      // output data of each row
      while ($row=$result->fetch_assoc()) {
        $row_array['name'] = $row['name'];
        $row_array['serialno'] = $row['serialno'];
        $row_array['amount'] = $row['amount'];
        array_push($return_arr, $row_array);
      }    
    } else {
      echo "0 results";
    }
    $conn->close();
  }
?>

^^ php部分，

使用Javascript：

var arr = <?php echo json_encode($return_arr);?>, out = "<table>";

for (var i = 0; i < arr.length; i++) {
  out += "<tr><td>" + 
    arr[i].name +
    "</td><td>" +
    arr[i].serialno +
    "</td><td>" +
    arr[i].amount +
    "</td></tr>";
}

out += "</table>";
document.querySelector("#myPopup #here").innerHTML = out;

Answer 1

自动刷新来自使用输入类型=“提交”。当按下按钮时，类型等于“提交”的按钮或输入将自动刷新。

要解决此问题，请将输入的类型更改为“按钮”，或者在单击按钮时使用jQuery preventDefault函数。

preventDefault函数的文档： http://api.jquery.com/event.preventDefault/

Answer 2

根据您使用jQuery绑定表单的方式，您可以返回false以防止表单提交/刷新或使用preventDefault（）

http://api.jquery.com/event.preventDefault/

Html页面自动刷新

2 个答案: