如何将php输出显示到特定的div中？

Question

我正在尝试将输出显示到特定的 div 中，而不将 php 代码放入同一部分（参见下面的示例）。我如何从其他地方做到这一点，例如另一个使用 php/AJAX 的页面？

  <div class="flex-box">
     <div class="flex-container">flex-container 1</div>
     <div class="flex-container">
     <div class="flex-card-full" id="full"><header>full card</header></div></div>
     <div class="flex-container"><h2></h2>

 <?php
  if(isset($_GET['submit-search'])){
    $search = mysqli_real_escape_string($conn, $_GET['search']);
    $sql = "SELECT * FROM builders2000 WHERE Suburb LIKE '%$search%' OR Postcode LIKE '%$search%' OR Trading_name LIKE '%$search%' OR Categories LIKE '%$search%' OR State LIKE '%$search%' OR Address LIKE '%$search%'";

    $results = mysqli_query($conn, $sql);
    $queryResults = mysqli_num_rows($results);

    echo "There are '.$queryResults.' results.";

    if($queryResults > 0) {
      while($rows = mysqli_fetch_assoc($results)) {

        $name = $rows['Trading_Name'];
        $address = $rows['Address'];
        $suburb = $rows['Suburb'];
        $state = $rows['State'];
        $postcode = $rows['Postcode'];
        $phone = $rows['Phone'];
        $email = $rows['Email'];
        $website = $rows['Website'];
        $categories = $rows['Categories'];

    echo "<div class='flex-card' id='card'><div class='card-container'><section class='section-content'><h6>$name</h6>
                                                                                                <p class='text-content'>$address $suburb $state $postcode</p>
                                                                                                <p class='text-content'>$categories</p></section></div>    
                                  <div class='card-container'><a href='tel:$phone' name='phone' class='social-icon'><i class='fas fa-phone'></i></a> 
                                                              <a href='mailto:$email' name='email'class='social-icon'><i class='fa fa-envelope'></i></a> 
                                                              <a href='$website' name='website' class='social-icon'><i class='fab fa-edge'></i></a></div></div></div>";
        } } else {  echo "There are no results matching your search";  }}
 ?>

Answer 1

你好，这里是一个简单的例子，但我认为这个方法很容易理解：

index.php 文件：

<form method="post" id="myformid">
  Name :<input type="text" id="name" name="name">
  <input type="submit"  value="Test">
  </form>
  <br>
  <div id="myDiv">
  </div>

这是一个简单的表单和 div，这个 div 就是你要追加数据的地方。

javascript：

function _ajax(action,data){
      return $.ajax({
        url: 'request.php',
        type: 'POST',
        dataType: 'JSON',
        data: {action: action, data: data}
      })
    }
    var result;
    //your form submit event
    $("#myformid").on('submit', function(event) {
      //prevent post
      event.preventDefault();
      //validate that name is not empty
      if ($("name").val() != "") {
        //parameters INS is insert data is the array of data yous end to the server
        var action = 'INS';
        var data = {
          name: $("#name").val()
        };
        console.log(data);
        //run the function and done handle the function
        _ajax(action,data)
        .done(function(response){
          console.log(response);
          //anppend name to the div
          $("#myDiv").append("<p>"+response.name+"</p>");
        });
      }
    });

最后是 request.php 文件：

<?php
//includes and session  start here
//validate that request parameters are set
if (isset($_POST["action"]) && isset($_POST["data"])) {
  //getters
$action = $_POST["action"];
$data = $_POST["data"];
//switch to handle the action to perfom maybe you want to update with the form too ?
switch ($action) {
  case 'INS':
    // database insert  here..
    //return a json object
    echo json_encode(array("name"=>$data["name"]));
    break;
}
}
 ?>

结果：

如果要替换显示在 div 中的数据，只需在将数据附加到它之前将其清空 =)

希望对你有帮助