在HTML链接中使用javascript变量时的正确语法

Question

我只是想结合一个简单的html（php）链接并包含一个JS变量。 这是我的，但语法不正确。 建议？

$.each(playlist, function(index, val) {
    playlistHtml += "<form name="form" method="post" action="../_inc/process_track_move.php?track="+val.sources[0].title"
});

Answer 1

一个建议和答案，答案：你需要使用单引号和双引号。 建议：使用变量将链接从逻辑中取出。 以这种方式查看和编辑更容易。 这不是必需的，但是当你回到它时它会更具可读性。

此示例基于您提供的内容。

$.each(playlist, function(index, val) {
    var baseLink = "../_inc/process_track_move.php?rack=";
    playlistHtml += 
"<form name='form' method='post'
action='" + baseLink + val.sources[0].title + "'";
});

这可能是假设您想要关闭表单链接而不包括。

$.each(playlist, function(index, val) {
    var baseLink = "../_inc/process_track_move.php?rack=";
    playlistHtml += 
"<form name='form' method='post'
action='" + baseLink + val.sources[0].title + "'></form>";
});

Answer 2

你应该在双引号内单引号，比如

$.each(playlist, function(index, val) {
    playlistHtml += "<form name='form' method='post' action=' ../_inc/process_track_move.php?track='+val.sources[0].title"
});

Answer 3

您通常不应该在JavaScript中手动组装原始HTML; 这很容易出错。 在您的情况下，即使您的代码有效，它也很容易受到编码错误和XSS安全问题的影响，因为它没有正确编码属性值。

更安全的选择是使用DOM API，框架或默认安全模板引擎来创建您需要的元素，这将自动关注编码属性值。

以下是我们如何在您的案例中使用DOM API而不是原始HTML。

var playlist = document.createElement('div');  // or document.querySelector('#playlist')?

$.each(playlist, function(index, val) {
    var form = document.createElement('form');
    form.setAttribute('name', 'form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', '../_inc/process_track_move.php?track=' + val.sources[0].title);
    playlist.appendChild(form);
});

playlistHtml += playlist.innerHTML;

您可以将创建的元素直接添加到文档中，也可以将它们转换为最初使用的HTML字符串。

如果你真的必须使用原始的HTML拼接，你不能只+到您的HTML文本字符串，则必须对其进行编码为HTML第一，以避免安全漏洞或错误。 至少，这意味着使用这样的函数：

function textToHtml(s) {
  return s
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
} 

您还必须将字符串中的" s "转义为\\"以便它们正确解析。 这给了我们：

playlistHtml += "<form name=\"form\" method=\"post\" action=\"../_inc/process_track_move.php?track=" + textToHtml(val.sources[0].title) + "\"></form>";