如何在ajax更新後更改td內容

-1

我需要在ajax更新後更新具有唯一標識的td的內容。如何在ajax更新後更改td內容

但是我的方法不工作，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]); 
}

來源

2017-04-05 jsn alf

你能顯示html嗎？ –

我編輯了我的帖子@ShaktiPhartiyal –

你是否將從服務器返回的數據應用到你的ID上？如果是的話，是從服務器返回一個JSON數據？ –

基於您的評論，我認爲這個問題是您正在使用相同的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>

我也建議你檢查服務器上，如果沒有錯誤保存數據打印錯誤和donnt變化值如果有的話。

來源

2017-04-05 11:34:26 user301441

這不工作，我已經添加了HTML，請你看看它？ –

HTML是好的，我寧可看到服務器響應的ajax調用。 – user301441

這裏http://imgur.com/a/9Fw5W 我試圖編輯我的名字，它成功了，我只是想刷新我的表來匹配新的數據。 –

也許你需要通過在返回數據這樣的td，因爲數據參數用於發送數據服務器。

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

來源

2017-04-05 11:31:53

不工作，我已經添加了HTML。你能看看嗎？ –

你能告訴我你是如何從函數返回數據的嗎？ –

我添加了update.php和model。php –

，如果服務器返回一個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); 
}

來源

2017-04-05 12:22:39

如何在ajax更新後更改td內容

回答

相關問題