将div的innerHTML设置为从MySQL数据库检索的信息(使用AJAX / PHP)?

时间:2014-12-29 03:54:40

标签: javascript php sql ajax

在我的页面(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中的名称和信息将保存为两个 - 本地MySQL数据库中的列表(列:“name”和“info”)。 我已经使用AJAX / PHP实现了这个功能,它可以正常工作。

2)如果用户点击“查找”按钮,那么我希望将文本输入到内容可编辑的div中,其中id =“name”(名称div的innerHTML)要在数据库中查找。如果找到该名称,我希望该网站检索存储在相应条目的“信息”列中的文本,并将其输入到内容可编辑的div中,其中id =“info”(将'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页面的content-editable,id =“info”div中。我该怎么办?

我已经尝试了回复javascipt行的内容,如herehere所述,但我无法使用现有的StackOverflow Q&amp; As。我很抱歉,如果这个问题过于基本或已经以我不理解的方式解决,我对PHP和后端开发都很陌生。

感谢您的帮助!千斤顶

1 个答案:

答案 0 :(得分:0)

要在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中的

改善了你的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而不是mysql。它已被弃用了 这是学习面向对象语法的良好开端

  2. 你正在逃避post var - 它非常好,但是你没有检查 是否既不存在于客户端(if ($name) { // do ajax request })也不存在于后端if (!empty($_POST['nameSubmit'])) { // do all other stuff }

  3. 我认为你不需要那么多变数,也有些编码员更喜欢另一个 准备查询的方式。

  4. 实际上您只需要info表,而不是全部*

  5. 我会尝试在一段代码中显示这一切:

    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());
        }
    }