节点表示发送字符串,因为html将单引号转换为双引号

时间:2018-07-04 21:59:29

标签: javascript html node.js ajax express

我正在尝试将此字符串作为html发送。该字符串存储在var中,并使用res.send(respuesta);

发送
<div data-nanogallery2='{
        "itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/",
        "thumbnailWidth": "auto",
        "thumbnailBorderVertical": 0,
        "thumbnailBorderHorizontal": 0,
        "colorScheme": {
          "thumbnail": {
            "background": "rgba(0,0,0,0)"
          }
        },
        "thumbnailDisplayTransition": "flipDown",
        "thumbnailDisplayTransitionDuration": 750,
        "thumbnailDisplayInterval": 250,
        "thumbnailLabel": {
          "display": false
        },
        "thumbnailHoverEffect2": "toolsAppear|scale120",
        "galleryDisplayMode": "pagination",
        "galleryPaginationMode": "numbers",
        "thumbnailAlignment": "center"
      }'>
      <a href="berlin1.jpg" data-ngthumb="berlin1t.jpg" data-ngdesc="">Berlin 1</a>
      <a href="berlin2.jpg" data-ngthumb="berlin2t.jpg" data-ngdesc="">Berlin 2</a>
      <a href="berlin3.jpg" data-ngthumb="berlin3t.jpg" data-ngdesc="">Berlin 3</a>

    </div>

问题在于,所有的'都会以某种方式自动转换为",从而弄乱了我的客户端标记。

有什么方法可以维护'吗?

编辑: 我正在尝试动态生成HTML的这一部分。它由图库库使用。 const总是相同的,然后我生成带有图片信息的链接并将其添加到字符串中,然后通过respuesta将字符串ajax发送给客户端以附加它。 / p>

// GETS
router.get('/bodas', function (req, res) {
    Foto.find({ tipo: 'bodas' }).lean().exec(function (err, data) {
        if (err) throw err;
        var respuesta = generateBodasHTML(data);
        res.send(respuesta);
    });
});
function generateBodasHTML(data) {
    var respuesta = cuerpoGaleria0;
    for (i = 0; i < data.length; i++) {
        respuesta += '<a href="' + data[i].foto_name + '" data-ngthumb="' + data[i].thumb_name + '" data-ngdesc="">' + data[i].name + '</a>';
    }
    respuesta += "</div></div>";
    return respuesta;
}
const cuerpoGaleria0 = `<div class="page_wrapper_home"><div data-nanogallery2='{"itemsBaseURL": "../assets/galeria/", "thumbnailWidth": "auto", "thumbnailBorderVertical": 0, "thumbnailBorderHorizontal": 0, "colorScheme": { "thumbnail": { "background": "rgba(0,0,0,0)" } }, "thumbnailDisplayTransition": "flipDown", "thumbnailDisplayTransitionDuration": 750, "thumbnailDisplayInterval": 250, "thumbnailLabel": { "display": false }, "thumbnailHoverEffect2": "toolsAppear|scale120", "galleryDisplayMode": "pagination", "galleryPaginationMode": "numbers", "thumbnailAlignment": "center"}'>`;

这是ajax call

function getContentAjax(pagina) {
        $.ajax({
            url: '/' + pagina
        }).done(function (result) {
            $('#contenido').append(result);
            toggleSliders();

            if (pagina === 'inicio') {
                triggerHomeAnimations();
            }
        });
    }

2 个答案:

答案 0 :(得分:0)

您可以使用反引号`

`{
    "itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/",
    "thumbnailWidth": "auto",
    "thumbnailBorderVertical": 0,
    "thumbnailBorderHorizontal": 0,
    "colorScheme": {
      "thumbnail": {
        "background": "rgba(0,0,0,0)"
      }
    },
    "thumbnailDisplayTransition": "flipDown",
    "thumbnailDisplayTransitionDuration": 750,
    "thumbnailDisplayInterval": 250,
    "thumbnailLabel": {
      "display": false
    },
    "thumbnailHoverEffect2": "toolsAppear|scale120",
    "galleryDisplayMode": "pagination",
    "galleryPaginationMode": "numbers",
    "thumbnailAlignment": "center"
  }`>

答案 1 :(得分:0)

更新:问题标题中的Express似乎仍然没有问题。

也许AJAX请求引起了问题,但该帖子中未包含有关在浏览器中收到的响应的调试信息。

如果您在nodejs中本地运行此测试服务器:

Express Server

var app = express();
app.get("/bodas", function( req, res, next) {
    var html = '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\n\n';

    var data = [
        {foto_name: "foto_name1", thumb_name: "thumb_name1", name: "name1"},
        {foto_name: "foto_name2", thumb_name: "thumb_name2", name: "name2"},
        {foto_name: "foto_name3", thumb_name: "thumb_name3 ", name: "name3"}
    ];
    var respuesta = generateBodasHTML(data);

    res.send(html + respuesta + '\n\n</body></html>');
});
function generateBodasHTML(data) {
    var respuesta = cuerpoGaleria0;
    for (i = 0; i < data.length; i++) {
        respuesta += '<a href="' + data[i].foto_name + '" data-ngthumb="' + data[i].thumb_name + '" data-ngdesc="">' + data[i].name + '</a></br>';
    }
    respuesta += "</div></div>";
    return respuesta;
}
const cuerpoGaleria0 = `<div class="page_wrapper_home"><div data-nanogallery2='{"itemsBaseURL": "../assets/galeria/", "thumbnailWidth": "auto", "thumbnailBorderVertical": 0, "thumbnailBorderHorizontal": 0, "colorScheme": { "thumbnail": { "background": "rgba(0,0,0,0)" } }, "thumbnailDisplayTransition": "flipDown", "thumbnailDisplayTransitionDuration": 750, "thumbnailDisplayInterval": 250, "thumbnailLabel": { "display": false }, "thumbnailHoverEffect2": "toolsAppear|scale120", "galleryDisplayMode": "pagination", "galleryPaginationMode": "numbers", "thumbnailAlignment": "center"}'>`;

var server = app.listen(80, function () {
  console.log("testexpress listening on local host port 80");
});

并查看使用URL发送的页面的页面来源:

http://localhost/bodas

您会看到保留了单引号,并且data-nanogallery2属性在语法上是有效的。

请阅读您首选语言网站(例如https://es.stackoverflow.com/help/mcvehttps://en.stackoverflow.com/help/mcvehttps://pt.stackoverflow.com/help/mcve)的帮助中心中的“如何创建完整且可验证的示例”。包含测试数据会增加您获得有用答案的机会。