使用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';