javascript - 如何将 PHP 数据发送到 HTML 文章中

Question

在我的 HTML 中，我有一篇包含可点击列表的文章。我还有一个将数据添加到数据库的表单。添加数据完成后，我希望 PHP 根据表单中给出的数据将一个新列表发送到 HTML 中的文章以及其他列表。

我该怎么做？我知道如何在 HTML 中显示 PHP 数据，但不知道如何在 HTML 中显示现有文章中的数据。

每次点击链接后更新和刷新页面的函数称为 MyFnc，这是它的 JavaScript:

function myFnc(x) {
  if (x == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else { //if a link is clicked
    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() {
      //readyState = 4: request finished and response is ready
      //status = 200: "OK"
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    }
    xmlhttp.open("GET", "get_data.php?q=" + x, true);
    xmlhttp.send();
  }
}

get_data.php 是我将数据库中的数据显示到网页的地方。我知道显示链接必须在 get_data 中完成，因为这是我向页面显示所有内容的地方。但现在我只想知道如何发送从 add_records 检索到的数据并从中创建一个列表。

这是我的 HTML 文章:

<article>
  <ul class="lists" style="list-style-type:none">
    <li><a href="#Tiger" onclick="myFnc('G. cuvier')">Tiger</a></li>
    <li><a href="#Hammerhead" onclick="myFnc('S. mokarran')">Hammerhead</a></li>
    <li><a href="#Bull" onclick="myFnc('C. leucas')">Bull</a></li>
    <li><a href="#Great White" onclick="myFnc('C. carcharias')">Great White</a></li>
    <li><a href="#Mako" onclick="myFnc('I. oxyrinchus')">Mako</a></li>
    <li><a href="#Greenland" onclick="myFnc('S. microcephalus')">Greenland</a></li>
    <li><a href="#Whale" onclick="myFnc('R. typus')">Whale</a></li>
    <li><a href="#Thresher" onclick="myFnc('A. vulpinus')">Thresher</a></li>
    <li><a href="#Oceanic" onclick="myFnc('C. longimanus')">Oceanic WhiteTip</a></li>
    <li><a href="#Goblin" onclick="myFnc('M. owstoni')">Goblin</a></li>
  </ul>
</article>

这是我的 HTML 表单:

<form method="post" action="add_to_records.php">
  <input type="hidden" name="addshark" value="true" />
  <fieldset>
    <label>Name:<input type="text" name="Name" /></label>
    <label>SpeciesID:<input type="text" name="speciesID" /></label>
    <label>Genus:<input type="text" name="genss" /></label>
    <label>Family:<input type="text" name="famly" /></label>
    <label>Order:<input type="text" name="ordr" /></label>
    <label>Class:<input type="text" name="clss" /></label>
    <label>Create New Shark</label>
    <input type="submit" value="add shark" />
  </fieldset>
  <br />
</form>

这是我的add_to_records.php:

<?php 
include 'connect.php';

if (isset($_POST['addshark'])) 
{
    include 'connect.php';    

    $Namee = mysqli_real_escape_string($connect,trim($_POST['Name']));
    $specID = mysqli_real_escape_string($connect,trim($_POST['speciesID']));
    $gens = mysqli_real_escape_string($connect,trim($_POST['genss']));
    $fam = mysqli_real_escape_string($connect,trim($_POST['famly']));
    $ord = mysqli_real_escape_string($connect,trim($_POST['ordr']));
    $cls = mysqli_real_escape_string($connect,trim($_POST['clss']));

    if (!mysqli_query($connect, "INSERT INTO Species
                                (SpeciesID,Genus,Family,Order_,Class) 
                                VALUES ('$specID','$gens','$fam','$ord','$cls')")) 
    {
        die('error inserting new record');
    } 
    //I would like the list it returns to look like this if the Name entered was Hello 
    //and the speciesID entered was Something
    //<li><a href="#Hello" onclick="myFnc('Something')">Hello</a></li>
    //echo "shark was added";
    header('Location: ProjectMainAdmin.html'); exit;
}

mysqli_close($connect);
?>

Answer 1

只要使用jQuery的AJAX，就简单很多，更容易实现。数据将传递到服务器，完成后您需要将数据附加到列表中。

像这样:

$("form").submit( function(){

    $.ajax({
        url: "add_to_records.php", 
        success: function(result){
           $(".lists").append("<li><a href=''>" + result.name + "</li>");
        }
     });

  return false;
});