Question

我需要在ajax更新后更新我的td中具有唯一ID的内容。

然而，我的方法不起作用，ajax是成功的，但td只会在页面重新加载后更新。

$(document).ready(function(){
        $('body').on('click', '.editButton', function(e){

            var postID = $(this).val();
            var postURL = "../Controller/update.php";
            var postNama = $("#nama"+postID).val();
            var postMSISDN = $("#msisdn"+postID).val();
            var postSMS = $("#sms"+postID).val();

            $.ajax({
                type: "POST",
                url: postURL,
                data:
                {
                    nama: postNama,
                    msisdn: postMSISDN,
                    sms: postSMS,
                    id: postID
                },
                success: function(data){
                    $("#nama"+postID).html(postNama);
                    $("#msisdn"+postID).html(postMSISDN);
                    $("#sms"+postID).html(postSMS);
                }
            });
            e.preventDefault();

        });
    });

html我回应道：

                            <tr id='tr".$data['id']."'>
                            <td>".$data['id']."</td>
                            <td id='nama".$data['id']."'>".$data['nama']."</td>
                            <td id='msisdn".$data['id']."'>".$data['msisdn']."</td>
                            <td id='sms".$data['id']."'>".$data['sms']."</td>
                            <td><button type='button' class='btn btn-default' data-toggle='modal' data-target='#editModal".$data['id']."'>Edit</button></td>
                            <td><button type='button' class='btn btn-danger' data-toggle='modal' data-target='#deleteModal".$data['id']."'>Delete</button></td>
                        </tr>

update.php：

<?php
require_once "../Model/Model.php";

$nama = $_POST["nama"];
$msisdn = $_POST["msisdn"];
$sms = $_POST["sms"];
$id = $_POST["id"];

updateData($nama, $msisdn, $sms, $id);
?>

model.php：

    function updateData($nama, $msisdn, $sms, $id){
    try{
        $conn = new PDO('mysql:host=localhost; dbname=crud', 'root', '');

        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }
    catch(PDOException $e){
        echo 'ERROR: ' . $e->getMessage();
    }
    $conn->prepare("UPDATE data SET nama = ?, msisdn = ?, sms = ? WHERE id = ?")->execute([$nama, $msisdn, $sms, $id]);
}

Answer 1

也许您需要像这样在td中传递返回数据，因为数据参数用于将数据发送到服务器。

success: function(data){
   $("#nama"+postID).html(data);
   $("#msisdn"+postID).html(data);
   $("#sms"+postID).html(data);
 }

Answer 2

根据您的评论，我认为问题在于您使用相同的ID来获取数据，以及您尝试填充数据的元素。所以您只需要更改td的ID元素并根据它编辑脚本。像：

$(document).ready(function(){
    $('body').on('click', '.editButton', function(e){

        var postID = $(this).val();
        var postURL = "../Controller/update.php";
        var postNama = $("#nama"+postID).val(); //there are ids of the inputs
        var postMSISDN = $("#msisdn"+postID).val();
        var postSMS = $("#sms"+postID).val();

        $.ajax({
            type: "POST",
            url: postURL,
            data:
            {
                nama: postNama,
                msisdn: postMSISDN,
                sms: postSMS,
                id: postID
            },
            success: function(data){
                $("#nama-td-"+postID).html(postNama); //and there for the td elements
                $("#msisdn-td-"+postID).html(postMSISDN);
                $("#sms-td-"+postID).html(postSMS);
            }
        });
        e.preventDefault();

    });
});

当然根据那个改变html：

                        <td id='nama-td-".$data['id']."'>".$data['nama']."</td>
                        <td id='msisdn-td-".$data['id']."'>".$data['msisdn']."</td>
                        <td id='sms-td-".$data['id']."'>".$data['sms']."</td>

我还建议您检查服务器上是否没有错误保存数据打印错误，如果有则更改值。

Answer 3

如果您的服务器返回JSON，那么您可以使用以下技术：

让我们假设您的服务返回JSON数据，如下所示：

{name:"somename",msisdn:"9898989898",sms:"some_sms"}

然后您可以应用以下内容：

success: function(data){
$("#nama"+postID).html(data.name);
$("#msisdn"+postID).html(data.msisdn);
$("#sms"+postID).html(data.sms);
}

请记住，如果您的服务器没有发送带有数据的内容类型：application/json标头，那么您需要首先解析响应：

success: function(data){
var parsedData = JSON.parse(data);
$("#nama"+postID).html(parsedData.name);
$("#msisdn"+postID).html(parsedData.msisdn);
$("#sms"+postID).html(parsedData.postSMS);
}

如何在ajax更新后更改td内容

3 个答案: