Question

我正在跟随AJAX功能，我正在创建一个新的html内容。为此我已经声明了两个变量，并且我将字符串和其他变量的连接值分配给这两个变量。实际上这些字符串我将使用jQuery的.html()方法。但我无法正确连接字符串和变量值。有人可以请这方面指导我吗？

功能上的其他功能完美无缺，请忽略其他内容。请仅考虑我在AJAX成功响应中连接时遇到的问题。

$('#form').submit(function(e) {
  var form = $(this);
  var br_id = $('#brand_id').val();
  var status = '0';
  var module_url = $('#module_url').val();
  var upload_url = $('#upload_url').val();
  var formdata = false;
  if(window.FormData) {
    formdata = new FormData(form[0]);
  }

  var formAction = form.attr('action');

  $.ajax({
    type        : 'POST',
    url         : 'manufacturers.php',
    cache       : false,
    data        : formdata ? formdata : form.serialize(),
    contentType : false,
    processData : false,

    success: function(response) { 
      if(response.error == 0) {  
        $('#messages').addClass('alert alert-danger').text(response.error_message);

      } else { 
        $('#BrandImageModal').modal('hide');

  //For the below two statements I'm getting syntactical errors while concatenating strings and variables        
  var newdiv = '<a href="#" id="promotion_status_"+br_id+" onClick="change_promotion_status("+module_url+" , promotion_status, +"br_id+", '0'); return false;"><button type="button" class="btn btn-default">Off</button></a> ';
  var newtd  = '<img src="+upload_url"+text(response.image_path)+" width="80" height="80">';           
      }
    },
    dataType:"JSON"
  });
  e.preventDefault();
});

感谢。

Answer 1

有两种可能的字符串分隔符：'和"。您可以使用其中任何一种，但不能将它们混合使用。用于字符串的那个需要在内部转义，另一个可以自由使用。

在你的情况下，

'<a href="#" id="promotion_status_"+br_id+" onClick="change_promotion_status("+module_url+" , promotion_status, +"br_id+", '0'); return false;"><button type="button" class="btn btn-default">Off</button></a> '

是一个大字符串 - 从语法高亮可以看出。它必须是

'<a href="#" id="promotion_status_'+br_id+' onClick="change_promotion_status('+module_url+' , promotion_status, '+br_id+', \'0\'); return false;"><button type="button" class="btn btn-default">Off</button></a> '

左右工作（仍然没有生成正确的HTML，因为某些属性分隔符现在在字符串中缺少）。同样适用于newtd。

此外，您应该从不使用内联事件处理程序属性 - 尤其不是动态创建的属性。 module_url和br_id的值将成为代码字符串，例如，如果值是字符串，那么在生成的HTML中，它们将意味着具有名称的变量。如果你想让它们成为字符串文字，你需要正确地转义它们（例如使用JSON.stringify），但之后你还需要HTML-escape整个事情，这是非平凡的。总结：不要这样做。

相反，创建元素（如果需要，甚至从HTML字符串），然后动态附加事件处理程序：

el.onclick = function(e) { change_promotion_status(module_url, promotion_status, br_id, '0'); return false; };

var newdiv = '<a href="#" id="promotion_status_'+br_id+'"><button type="button" class="btn btn-default">Off</button></a>'; var newtd = '<img src="'+upload_url+text(response.image_path)+'" width="80" height="80">'; var $div = $(newdiv); // use jQuery to parse the HTML $div.click(function(e) { // use jQuery for event listeners change_promotion_status(module_url, promotion_status, br_id, '0'); return false; }); $div.appendTo(…) // use jQuery for appending the new element (div, a, td, img?) to the DOM

Answer 2

混合单引号和双引号。例如，您有：

'<a href="#" id="promotion_status_" + br_id + " onClick="change_promotion_ ...

但它应该是：

'<a href="#" id="promotion_status_' + br_id + '" onClick="change_promotion_ ...

您的字符串由单引号分隔，因此请确保它们位于每个连接的开头/结尾。

在以下场景中jQuery / JavaScript中的字符串和变量连接有什么问题？

2 个答案: