如何使用 vanilla JavaScript 刷新 JSON 請求中的表行

Question

如果文件是“紅線”，我已經編寫了我的第一個 AJAX 請求，將表中的值設置為 1。 如果頁面加載時值為 1，則文件名應顯示為紅色（一個簡單的 if 語句）。 AJAX 請求工作正常，表中的值更改為 1，但我不確定如何在不刷新整個頁面的情況下刷新表中的行。

這是我的第一個 AJAX 請求，所以請耐心等待。

這是 AJAX 請求：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
    function markAsRedline(attachmentid) {
        new Request.JSON({
            url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
            onSuccess:
                // refresh table row
        }).send();
    }
</script>

編輯：這是要更新的表行：

<tr id="attrow2104461" class="even">
    <td><span title="ABC">ABC (65)</span></td>
    <td><input style="background-color: transparent; border: none;" type="text" name="description" class="description" size="42"><img src="##/img/redline.png" height="17px" title="Mark as redline" onclick="markAsRedline(2104461);"></td>
    <td><a href="###" data-attid="2104461">resfds.docx</a></td> <!-- This is where the text should change color -->
</tr>

我不知道 go 從這里到哪里。 很感謝任何形式的幫助。

Answer 1

Request.JSON的onSuccess屬性是 ajax 調用成功返回數據時觸發的 function 調用。 對於如何處理這個問題，您有多種選擇。

例 1

假設您將顏色更改分解為它自己的方法，如下所示：

let markAsRedLine = (responseJSON, responseText) => {
  // let's assume the response contains the attachmentid we need
  // select the element on the page with the attachmentid
  let el = document.querySelector('[data-attid="' + responseJSON.attachmentid + '"]');
  // style the element's text color as RED
  el.style.color = 'red';
}

現在，當您調用 AJAX 時，您可以分配onSuccess屬性，以便它調用markAsRedLine function。

new Request.JSON({
  url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
  onSuccess: markAsRedLine
}).send();

例 2

您可能不關心 AJAX 調用的結果是什么，因此下一個示例忽略該信息並僅使用從輸入元素傳遞的附件 ID：

new Request.JSON({
  url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
  onSuccess: function(responseJSON, responseText) { // notice function definition
    let el = document.querySelector('[data-attid="' + attachmentid+ '"]');
    el.style.color = 'red'
  }
}).send();

你也可以像第一個例子一樣打破這個：

function makeRed(attachmentid) {
  let el = document.querySelector('[data-attid="' + attachmentid+ '"]');
  el.style.color = 'red'
}

new Request.JSON({
  url: '<?php echo site_url('job/markAsRedline'); ?>/' + attachmentid,
  onSuccess: function(responseJSON, responseText) { // notice function definition
    makeRed(attachmentid);
  }
}).send();

在該示例中，您需要實現由 API 定義的onSuccess function 以免破壞它，然后在 function 內部調用您的元素。

例 3

在下一個示例中，您可以看到如何在不使用 AJAX 調用的情況下執行此操作：

 function markAsRedline(attachmentid) { var el = document.querySelector('[data-attid="' + attachmentid + '"]'); el.style.color = 'red'; };

 <table> <tr id="attrow2104461" class="even"> <td><span title="ABC">ABC (65)</span></td> <td><input style="background-color: transparent; border: none;" type="text" name="description" class="description" size="42"><img src="https://otb.cachefly.net/wp-content/uploads/2013/04/red-line.png" height="17px" /></td> <td><a href="###" data-attid="2104461">resfds.docx</a></td> <;-- This is where the text should change color --> </tr> </table> <button type="button" onclick="markAsRedline('2104461');">Mark as Red</button>

MooTools 在Request.JSON上提供了一些不錯的文檔 -> https://mootools.net/core/docs/1.6.0/Request/Request.Z0ECD11C1D7A287401D148A23BBD7