使用jquery附加將表單元素添加到html頁面中的特殊字符

Question

我有一個html頁面，該頁面需要創建如下形式的表單：

<form action="/tasks/<%= allTasks.e[0].id %>/delete" method="POST">
        <button class="deleteTask">Delete</button>
</form>

但是當在使用jQuery的javascript文件中時

$(function(){
  let myform=String("<form action='/tasks/<%= allTasks.e[0].id%>/delete' method='POST'>
  <button>DELETE</button></form>");
  $('span').each(function(){$(this).append(myform)});
})

它將顯示無法發布/tasks/%3C%25=%20allTask​​s.e[0].id%20%25%253E/delete

原因是特殊字符％，<>被這些數字替換。 如何防止這種情況發生？

謝謝！

Answer 1

POST失敗的原因不是因為特殊字符% ， <>被替換，而是因為服務器端模板材料（ <%= %> ）沒有被替換。

您需要替換myForm字符串中的<%= allTasks.e[0].id%>才能使用實際任務ID。 這意味着您的服務器端技術需要處理JavaScript文件內容，或者應該將包含<%= allTasks.e[0].id%>內容的JavaScript代碼移至HTML模板文件。

HTTP POST請求應如下所示：

POST /tasks/33989/delete

不

POST /tasks/<%= allTasks.e[0].id%>/delete

順便說一句，為了使請求更具RESTful性，最好使用HTTP方法DELETE 。

更新：如果javascript文件需要獲取從后端傳遞的任務ID，有一種簡單的方法：

1. 在HTML模板文件中，創建一個<script>元素。

2. 在上述腳本元素中，將任務ID數據存儲在全局窗口對象中。

   window.taskId = '<%= allTasks.e[0].id%>';

3. 這樣，當在后端組裝HTML時，以上代碼將轉換為：

   window.taskId = '77878';

4. 當jQuery需要發送Ajax請求時，它可以從window對象中提取任務ID：

   let actionURL = '/tasks/' + window.taskId + '/delete';