從PHP/MySQL填充HTML加載的表格

我已經閱讀了許多文章和其他網站，他們解釋瞭如何閱讀MySQL數據庫並在HTML表單上顯示數據。所有這些信息的問題是這些示例使用PHP構建表單。我的礦已經存在並且已經加載。從PHP/MySQL填充HTML加載的表格

我的HTML/PHP：

<html> 
<head> 
    <title>Alpaga Wasi - Facture</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1252" > 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <link rel="stylesheet" type="text/css" href="StyleSheet_Invoice.css"/> 
    <style> 
     @media print 
     { 
     input.Button {display:none;} 
     button.Button {display:none;} 
     } 
    </style> 
</head> 
<body> 
<form action="InvoiceViewFunction.php" method="post"> 
<?php include("InvoiceForm.php"); ?> 
<input class="Button" type="submit" value="Get Invoice" name="nGetInvoice"/>  
</form> 
</body> 
</html>

的<?php include("InvoiceForm.php"); ?>線帶來的，它包含表，TR，TD和所有輸入字段的HTML。這樣我就可以重複使用相同的「InvoiceForm」來將數據輸入到數據庫並檢索它。

以下是我的測試代碼，當用戶單擊「獲取發票」按鈕時，我至今已從數據庫中獲取數據。

<?php 
//Connect to database 
include("../ConfigFiles/ConnectDB_local_i.php"); 

    //Populating the variables 
    $InvoiceNo = $_POST["nInvoiceNo"]; 

    //Reading a specific invoice from DB 
     echo "<br>Trying to read from DB with invoice = <br>" . $InvoiceNo . "<br>"; //This tells the correct number just fine. 

     $query = "SELECT * FROM `invoicedata_table` WHERE InvoiceNo = '$InvoiceNo'"; 
     $result = $mysqli->query($query) or die($mysqli->error.__LINE__); 
     if($result->num_rows > 0) 
     { 
      while($row = $result->fetch_assoc()) 
      { 
       echo stripslashes($row['ClientName']) . "<br>"; 
      } 
     } 
     else 
     { 
      echo 'NO RESULTS'; 
     } 

//Close the DB connection 
$mysqli->close(); 
?>

我在編程方面一般還很新。上面的代碼很好地測試我的SQL工作正常。但是，我不希望數據只是回顯到一個新的空白屏幕。我希望它能填充我點擊「獲取發票」按鈕的表單。我不想在PHP中重建它，除非專家可以告訴我這是做事的常用方式。我應該把我的SELECT在其他地方，如客戶端JavaScript？有41個字段需要填充？

來源

2013-12-19 PacaMama

你應該看看阿賈克斯。基本上，JavaScript會向另一個php文件發出請求並異步返回數據。 – AustinAllover

嗨AustinAllover，我在w3schools.com上簡單地看過這個。我已經與各種語言的HTML，CSS，Javascript，SQL已經在我的腦海中。這個Ajax似乎將所有這些混合在一起。我希望能找到更簡單的事情。 – PacaMama

如果您使用jQuery等JavaScript庫，這非常簡單。 – AustinAllover

回答按OP：

創建一個PHP腳本來接收HTTP請求，並從數據庫
1. 獲取數據服務器
2. 上創建一個名爲api.php PHP腳本複製並粘貼以下示例並保存：

。

<?php 
    //-------------------------------------------------------------------------- 
    // Example php script for fetching data from mysql database 
    //-------------------------------------------------------------------------- 
    $host = "localhost"; 
    $user = "root"; 
    $pass = "root"; 

    $databaseName = "ajax01"; 
    $tableName = "variables"; 

    //-------------------------------------------------------------------------- 
    // 1) Connect to mysql database 
    //-------------------------------------------------------------------------- 
    include 'DB.php'; 
    $con = mysql_connect($host,$user,$pass); 
    $dbs = mysql_select_db($databaseName, $con); 

    //-------------------------------------------------------------------------- 
    // 2) Query database for data 
    //-------------------------------------------------------------------------- 
    $result = mysql_query("SELECT * FROM $tableName");   //query 
    $array = mysql_fetch_row($result);       //fetch result  

    //-------------------------------------------------------------------------- 
    // 3) echo result as json 
    //-------------------------------------------------------------------------- 
    echo json_encode($array); 

?>

使用JQuery AJAX
1. 創建一個名爲client.php與在它下面的內容的相同目錄下的HTML腳本創建一個客戶端腳本來從API的腳本數據：

。

<!--------------------------------------------------------------------------- 
Example client script for JQUERY:AJAX -> PHP:MYSQL example 
----------------------------------------------------------------------------> 

<html> 
    <head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    </head> 
    <body> 

    <!------------------------------------------------------------------------- 
    1) Create some html content that can be accessed by jquery 
    --------------------------------------------------------------------------> 
    <h2> Client example </h2> 
    <h3>Output: </h3> 
    <div id="output">this element will be accessed by jquery and this text replaced</div> 

    <script id="source" language="javascript" type="text/javascript"> 

    $(function() 
    { 
    //----------------------------------------------------------------------- 
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/ 
    //----------------------------------------------------------------------- 
    $.ajax({          
     url: 'api.php',     //the script to call to get data   
     data: "",      //you can insert url argumnets here to pass to api.php 
             //for example "id=5&parent=6" 
     dataType: 'json',    //data format  
     success: function(data)   //on recieve of reply 
     { 
     var id = data[0];    //get id 
     var vname = data[1];   //get name 
     //-------------------------------------------------------------------- 
     // 3) Update html content 
     //-------------------------------------------------------------------- 
     $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html 
     //recommend reading up on jquery selectors they are awesome 
     // http://api.jquery.com/category/selectors/ 
     } 
    }); 
    }); 

    </script> 
    </body> 
</html>

答案僅供參考，它是從here。

來源

2016-04-27 03:21:03

從PHP/MySQL填充HTML加載的表格

回答

相關問題