时间戳

首页 > 解决方案 > 如何将 PHP 中的数据发送到 HTML 文章中

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

问题描述

在我的 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);
?>

标签： javascriptphphtmlmysql

解决方案

只需使用 jQuery 的 AJAX 即可，实现起来要简单得多。数据将被传递到服务器，然后一旦完成，您需要将数据附加到您的列表中。

像这样的东西：

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

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

  return false;
});

推荐阅读