使用 Ajax 和 Jquery 更新 mysqli 不起作用

Question

我只想使用 Ajax 更新或编辑 <td>。编辑或保存按钮位于 <td> 中，到目前为止一切正常。

Alert() 函数也显示变量值，但 Ajax 部分未运行。我不确定为什么数据没有更新。任何帮助将不胜感激。

Question_statistics 页面

include "include/connection";
while ($records=mysqli_fetch_array($query)){
    $id=$records['id'];
    $question=$records['question'];
    $question_from=$records['question_from'];
    $question_date=$records['question_date'];
    ?>
    <tr id="record-<?php  echo  $id; ?>" class="record">
        <th scope="row"><?php echo $id; ?></th>
        <!-- Update or Edit -->
        <td class="box" id="box<?php echo $id?>">
            <span class="edit" id="<?php echo $id?>">Edit</span>
            <span class="save" data-table="questions" id="save<?php echo $id?>">Save</span>
            <span id="Q<?php echo $id?>"><?php echo $question; ?></span>
        </td>
        <td class="text-center"><?php echo $question_from; ?></td>
        <td class="text-center"><?php echo $question_date; ?></td>
        <!-- Delete Button -->
        <td align="center">
            <a id="<?php echo $id; ?>" class="delete" data-table="questions">
                <img src="../assets/imgs/delete.png">
            </a>
        </td>
    </tr>

自定义javascript文件：

$(document).ready(function() {
    //Update Question  
    $('.edit').click(function(ae){
        ae.preventDefault();
        $('.edit').hide();
        var id = $(this).attr("id");
        $('#box'+id).addClass('editable');
        $('#box'+id).attr('contenteditable', 'true');
        $('#save'+id).show();
    });

    $('.save').click(function(){
        $('.save').hide();
        $('.box').removeClass('editable');
        $('.box').removeAttr('contenteditable');
        $('.edit').show();
        // var id =$(this).attr("id"); here id will show like `save+Id`
        var id= $('.edit').attr("id");
        var table = $(this).attr("data-table");
        var question=$('#Q'+id).text();

        alert(id+table+question);

        $.ajax({
            type: 'get',
            url:'include/ajaxserver.php',
            // data: variable or key : value, key:value, 
            data: {
                id: id,
                edit_me: true,
                table: table,
                question: question
            },
            beforeSend: function() {
                parent.animate({'backgroundColor':'#fb6c6c'},300);
            },
            success: function(data) {
                setTimeout( function ( ) {
                    alert( 'Data has been Deleted From Database' );
                },600 );
            }
        });
    });
});/*end of the ready function*/

ajaxserver 文件：

include('connection');
if(isset($_GET["edit_me"]) && $_GET["edit_me"]=="true")
{
    $id = $_GET["id"];
    $table = $_GET["table"];
    $question=$_GET["question"];
    $query = "UPDATE `{$table}` SET question='$question' WHERE id='$id'";

    if (mysqli_query($con, $query)) {
        echo "<script>alert('Updated')</script>";
    }
    else
      echo "<script>alert('Not Updated')</script>";
}

Answer 1

请注意，您正在检查 PHP 页面中是否有 $_GET["edit_me"] == "true"（字符串 true），但这意味着您应该在 ajax 中发送 edit_me: "true"。将您的 $_GET 更改为：

# This will just check the key is filled
if(!empty($_GET["edit_me"]))

然后修复 SQL 注入（你可以谷歌），然后发回而不是你正在做的那个 javascript 警报字符串：

die(json_encode(['success'=>(mysqli_query($con, $query))]));

这将发送回 ajax 响应 {"success":true}如果它有效。由于您并不特别期待 json，您可以解析 response:

// I changed the param here from data to response
success: function(response) {
    // Parse the response
    var data = JSON.parse(response);
    // Alert either way
    alert((data.success == true)? "Updated" : "Not Updated");
    // Do whatever this is
    setTimeout( function ( ) {
        alert( 'Data has been Deleted From Database' );
    },600 );
}