將div的innerHTML設置為從MySQL數據庫檢索到的信息（使用AJAX / PHP）？

Question

在我的頁面（index.php）上，我有一個ID為“ name”的內容可編輯div和一個ID為“ info”的內容可編輯div。 我也有一個ID =“ save”的按鈕和一個ID =“ lookUp”的按鈕。

在index.php中 ：

<p> <div> Name: </div> <div id="name" contenteditable="true"> </div> </p>
<p> <div> Info: </div> <div id="info" contenteditable="true"> </div> </p>

<p>
    <button id="save" type="button" style="float: left;" class="buttonText"> Save </button>
    <button id="lookUp" type="button" style="float: left;" class="buttonText"> Look Up </button>
</p>

我希望頁面能夠執行以下兩項操作：

1）如果用戶單擊“保存”按鈕，並且兩個內容可編輯的div均被填充，則用戶在內容可編輯的div中輸入的名稱和信息將保存到兩列表格中（列：“名稱”和“ info”）在本地MySQL數據庫中。 我已經使用AJAX / PHP 實現了此功能 ，並且可以正常工作。

2）如果用戶單擊“查找”按鈕，那么我希望在數據庫中查找輸入到內容可編輯div中且ID為“ name”（name div的innerHTML）的文本。 如果找到了名稱，我希望該站點檢索存儲在相應條目的“ info”列中的文本，並將其輸入到id =“ info”的內容可編輯div中（將'info'div的innerHTML設置為檢索到的信息）。

到目前為止，我已經使用以下代碼部分實現了2） ：

在index.php中 ：

<script type="text/javascript">
    $(document).ready(function(argument) 
    {
        $('#lookUp').click(function()
        {
            $name = $('#name').html();
            $info = $('#info').html();

            $.ajax(
            {
              url: 'lookup.php', type: 'post', data: {nameSubmit: $name}, datatype: 'html', success: function(rsp){alert(rsp);}
            });
        });
    });
</script>

在lookup.php中 ：

<?php 

    $name = $_POST['nameSubmit'];
    $name = mysql_real_escape_string($name);

    $connect = mysql_connect( "localhost", "localUserName", "localPassword", "" );
    $selectedDB = mysql_select_db("nameInfoDatabase", $connect);

    $lookup = "SELECT * FROM nameInfoTable";
    $lookupResults = mysql_query( $lookup, $connect );

    $nameFound = FALSE;

    while($record = mysql_fetch_array($lookupResults))
    {
        if( $record['name'] == $name )
        {
            $nameFound = TRUE;
            $info = $record['info'];
        }
    }   

    if( $nameFound ){ echo "Account Located.  Info: " . $info; }
    else{ echo "FAILURE: Name not found!"; }

    // NOW WHAT?
?>

單擊“查找”按鈕后，我要保存到index.php中id =“ info”的div的innerHTML中的信息將保存到lookup.php中的變量$ info中。 此$ info已正確打印（回顯）到對話框彈出窗口，但我希望將其輸入到index.php頁面的內容可編輯的id =“ info” div中。 我該如何進行？

我已經嘗試過像在這里和這里討論的那樣回顯javascipt行，但我無法使其與現有的StackOverflow Q＆A一起使用。 很抱歉，如果這個問題過於基礎或已經以我不理解的方式得到了解決，那么我對PHP和后端開發還是陌生的。

謝謝您的幫助！ 插口

Answer 1

要在JS中正確使用此數據，您可以將其以本機JSON格式發送。 lookup.php

<?php
// here connection and escaping stuff
$lookup = "SELECT * FROM nameInfoTable WHERE name='".$name."' LIMIT 1";
$lookupResults = mysql_query( $lookup, $connect );
// no $nameFound or while loop needed
if (mysql_num_rows($lookupResults) == 1) { // one result obtained
    echo json_encode(mysql_fetch_array($lookupResults)); // fetch and send
}
else {
    // you can do nothing, just don't send anything and response will be empty
    // that's how you can understand that "name" was not found
}
?>

在index.php中改善youja ajax成功功能：

success: function (rsp) {
    if (rsp) { // if data not empty
        var data = JSON.parse(rsp); // parse recieved data 
        $('#info').html(data.info); // properties' names are exactly as columns in your table or like query aliases
    }
}

編輯一些建議並不能真正回答您的問題，但可能會有所幫助

1. 嘗試使用mysqli代替mysqli 。 它已被棄用，這是學習面向對象語法的良好起點

2. 您正在轉義post var-這很好，但是您不檢查它是否既不在客戶端(if ($name) { // do ajax request })也不在后端if (!empty($_POST['nameSubmit'])) { // do all other stuff }

3. 我認為您不需要那么多變量，而且一些編碼人員更喜歡另一種准備查詢的樣式。

4. 實際上，您只需要表中的info ，而不是全部*

我將嘗試在一段代碼中展示所有這些內容：

if (!empty($_POST['nameSubmit'])) { // check post variable
    // establish connection
    $mysqli = new mysqli("localhost", "localUserName", "localPassword", "nameInfoDatabase");
    // prepare query, sprintf is a little bit easier to read 
    $query = sprintf("SELECT info FROM nameInfoTable WHERE name='%s' LIMIT 1", mysql_real_escape_string($_POST['nameSubmit']));
    // query, actually you can put sprintf here
    $result = $mysqli->query($query);
    // result will have 0 or 1 in property here
    if ($result->num_rows) {
        // php Array("info"=>"...") will be converted to {"info": "..."} for JS
        echo jscon_encode($result->fetch_assoc());
    }
}