JQuery .ajax() 发布到 php 数据库查询

Question

我看到很多这样的问题，但是，我什至无法进入 .ajax() 函数。我在这里解决了以前的问题：Accessing clicked cell instead of all cells using JQuery and Ajax 不过，我的后续行动从未得到回应。我不会再次发布代码，而是将其留在那里（除非另有说明）。无论如何可以帮助我弄清楚 1：获取 var field 和 var text 以反映我的更改。和2：如何访问tr 的id，因为它是一个变量。如何在 .parent() 中设置它？谢谢。

编辑：

这是我的脚本：

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".edit_td").click(function()
        {
            $(this).children(".text").hide();
            $(this).children(".editbox").show();

        }).change(function()
            {
                alert("working");
                var id=$(this).parent();
                var field=$("#input_"+ id).val();
                var text=$(this).children(".editbox").val();

                var dataString = 'id='+ id +'&field='+ field +'&text='+ text;
                //$("#first_"+ID).html('<img src="load.gif" />'); // Loading image

                if(input != text)
                {
                    $.ajax({
                    type: "POST",
                    url: "table_edit_ajax.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        $("#first_"+ID).html(first);
                        $("#last_"+ID).html(last);
                    }
                    });
                }
                else
                {
                    alert('Enter something.');
                }
            });

        // Edit input box click action
        $(".editbox").mouseup(function() 
        {
            return false
        });

        // Outside click action
        $(document).mouseup(function()
        {
            $(".editbox").hide();
            $(".text").show();
        });

    });
    </script>

这是我的 php 来显示表格：

public function displayTable($table)
{
  //connect to DB
  $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

echo "<table id='table' border='1'>";   //start an HTML table

$dbtable = $table;
$fields =array();
$result = mysqli_query($con, "SHOW COLUMNS FROM ".$dbtable);

//fill fields array with fields from table in database
while ($x = mysqli_fetch_assoc($result))
{
    $fields[] = $x['Field'];
}

$fieldsnum = count($fields);    //number of fields in array

//create table header from dbtable fields
foreach ($fields as $f)
{
    echo "<th>".$f."</th>";
}

//create table rows from dbtable rows
$result = mysqli_query($con, "SELECT * FROM ".$dbtable);

while ($row = mysqli_fetch_array($result))
{
    $rowid = $row[$fields[0]];
    echo "<tr class='edit_tr' id='".$rowid."'>";
    foreach ($fields as $f) 
    { 
        echo "<td class='edit_td'><span id='span_".$rowid."' class='text'>".$row[$f]."</span>
        <input type='text' value='".$row[$f]."' class='editbox' id='input_".$rowid."'/> </td>"; 
    }
    $rowid++;
    echo "</tr>";
}

echo "</table>";    //close the HTML table

//close connection
mysqli_close($con);

}

我什至不确定我是否正在进入我的 .change() 函数，但是一旦我这样做了，我想将 var id 设置为与我的数据库 ID 对应的行 ID（这将允许我运行我的通过我的主键更新查询）。 id 要做的下一件事是将var field 设置为td 选定的列标题，这样我就知道要从我的数据库中选择哪个字段。我想要的下一件事是我的var text 以反映文本框中更改的文本以发送到更新查询。

现在，我希望能够将其作为 POST 发送到 table_edit_ajax.php 并运行我的更新查询。我真的很困惑如何做到这一切。显然，我对 ajax 和 javascript 很陌生。

编辑：文件：table_edit_ajax.php

<?php
//connect to DB
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

echo 'in table_edit';

$id = mysqli_escape_String($con, $_POST['id']);
$table = "owners";
$field = $_POST['field'];
$text = mysqli_escape_String($con, $_POST['text']);
$query = "UPDATE owners SET ".$field."='".$text."' WHERE id = '".$id."'";
mysqli_query($con, $query);

//close connection
mysqli_close($con);

?>

Answer 1

首先，您需要将更改事件绑定到输入框，而不是其父 td，因为我假设您希望函数仅在输入值更改时运行。您还需要将 td 绑定从 click 更改为 mouseup 并添加 stopPropagation 调用以避免触发文档上的 mouseup 事件。

$(".edit_td").mouseup(function(e)
        {
            $(this).children(".text").hide();
            $(this).children(".editbox").show();
            e.stopPropagation();

        }).children('.editbox').change(function() {

获取 tr 的 id：

var id = $(this).closest('tr').attr('id');

获取文本：

var text = $(this).val();

获取该字段的最佳方法可能是为您的输入框分配一个表示列标题的数据属性。在您的 PHP 中，当您生成 tds 时：

foreach ($fields as $f) 
{ 
    echo "<td class='edit_td'><span id='span_".$rowid."' class='text'>".$row[$f]."</span>
    <input type='text' value='".$row[$f]."' class='editbox' id='input_".$rowid."' data-field='".$f."'/> </td>"; 
}

然后在你的 Javascript 中：

var field = $(this).data('field');

此外，您的查询字符串可能未正确编码。最好将数据作为对象提供：例如。 {id:id, field:field, text:text}，让jQuery为你处理url编码。

请注意，我注意到您将跨度的 ID 设置为 $rowid。在这样做时，您的跨度 ID 将不是唯一的，并且可能会出现问题。如果你需要给他们一个 id，试试id='span_".$rowid."."-".$f."'。