Question

我使用的是firefox 14.0.1和最新的jquery。我的应用程序中存在以下代码错误，因为未转义的＆符号。到现在为止还挺好。但是，当我将页面源复制到文件并使我的Web服务器服务时，代码工作正常。任何想法在这里发生了什么？！

热烈

约翰

function create_dialog () {

    var new_dialog = $('<div id="new_dialog"/>');

    new_dialog.dialog({ autoOpen: true, modal: true, open: foo, height: 400 });

    function foo() {

        $.ajax({
           url:      'http://localhost:8010/ecomm/?ajax=1&state=pop_pl_cst',
           cache:    false,
           success:  function (data, textStatus, jqXHR) 
                         { new_dialog.append('<div>' + 'foo A&E' + '</div>'); },
           dataType: 'xml',
           error:    function(jqXHR, textStatus, fred ) {alert('oops ' + textStatus);},
        });

    }; // foo

}

编辑：以上是我的代码的简单版本，以重现错误。以下是实际版本。虽然我可以逃脱＆符号等，但它并没有解释为什么相同的代码与看起来相同的页面的工作方式不同。某处肯定会有不同的东西......

function create_dialog ( ) {

    var new_dialog = $('<div id="new_dialog"/>');

    new_dialog.dialog({ autoOpen: true, modal: true, open: foo, height: 400 });

    function foo() {

        $.ajax({
            url:      'http://localhost:8010/ecomm/?ajax=1&state=pop_pl_cst',
            cache:    false,
            success:  success,
            dataType: 'xml',
            error:    function(jqXHR, textStatus, fred ) {alert('oops ' + textStatus);},
        });

        function success(data, textStatus, jqXHR) {

//             alert(data);
            $(data).find('row').each(process_row);
            function process_row () {
                console.log($(this).attr('pop_text'));
                new_dialog.append($('<div>' + $(this).attr('pop_text') + '</div>'));
//                 new_dialog.append('<div>' + 'foo' + '</div>');
            }

        } // success

    }; // foo

}

我注意到的一件事是，当数据类型是文本时，jquery会将其解析为我的独立页面中的xml（有效的那个）但不在应用页面中。

Answer 1

HTML非常宽容;它遇到问题时不会丢弃所有内容。但只是因为当你从服务器提供坏代码时它才有用，这并不意味着它是正确的。

未转义的实体会引发问题，就像您遇到的那样。 这就是你需要逃避它们的原因。因此，请遵循规则，逃避您的HTML，您将会很高兴。

mustache.js有一个非常简洁的例子：

var entityMap = {
  "&": "&amp;",
  "<": "&lt;",
  ">": "&gt;",
  '"': '&quot;',
  "'": '&#39;',
  "/": '&#x2F;'
};

function escapeHtml(string) {
  return String(string).replace(/[&<>"'\/]/g, function (s) {
    return entityMap[s];
  });
}

Answer 2

然后逃避它：

new_dialog.append('<div>' + 'foo A&amp;E' + '</div>');

附加＆符数据时JQuery附加错误

2 个答案:

然后逃避它：