Как отобразить вывод 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, просто очистите их перед добавлением данных =)

Надеюсьпомогает * * 1023