Javascript 从JSON对象创建HTML

这里我有一个sme.ajax函数可以很好地工作：

 $( document ).ready(function() {
$('a#kom').click(function (e) {
    var tabela = 'parcele';
      $.ajax({
            url: "getComments.php",
            type: "POST",
            async: true, 
            data: { ajdi:ajdi,tabela:tabela}, //your form data to post goes here as a json object
            dataType: "html",

            success: function(data) {
            console.log(data);  
            },
            error:function(data) {
            console.log(data); 
            }
        });

        });
        }); 

这个函数产生这个JSON：

[{"datum":"2014-05-22","komentar":"Testiranje za komentare da vidimo kako moze da sluzi, dali radidobro, bla bla bla bla bla bla bla bla bla bla bla bla ... ..."}] 

我知道这是一个基本的问题，但我找不到任何好的资源。。。当函数成功创建此html时，如何将.ajax函数转换为：

'<div class="notes">
        <h4>Tekst zaglavlje</h4>
        <h5>'+datum+'</h5>
        <p>'+komentar+'</p>
    </div>'

使用PHP更新

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 

    try {


     $result = $db->prepare("SELECT * FROM komentari WHERE id_utabeli=:ajdi AND tabela=:tabela");
     $result->execute(array(':ajdi' => $_POST['ajdi'], ':tabela' => $_POST['tabela']));
    $result = $result->fetchAll(); 

     $temp = array();
foreach($result as $r) {

          $temp[] = array('datum' => (string) $r['datum'], 'komentar' => (string) $r['komentar']); 

        }
    $table = $temp;
    $jsonTable = json_encode($table);
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    echo $jsonTable;
}
    else { 
echo 'ERROR 404';
  }  

---

由于您使用的是jquery，因此可以按如下方式执行：

$( document ).ready(function() {
    $('a#kom').click(function (e) {
        var tabela = 'parcele';
        $.ajax({
            url: "getComments.php",
            type: "POST",
            async: true, 
            data: { ajdi: ajdi, tabela: tabela },
            dataType: 'json',
            success: function(data) {
                console.log(data);  

                $.each(data, function(i, item) {
                    // create html
                    var elem = '<div class="notes">
                                    <h4>Tekst zaglavlje</h4>
                                    <h5>' + item.datum + '</h5>
                                    <p>' + item.komentar + '</p>
                                </div>'

                    $('body').append(elem); // append the item
                });
            },
            error: function(data) {
                console.log(data); 
            }
        });
    });
});

$（文档）.ready（函数（）{
$（'a#kom'）。单击（函数（e）{
var tabela='parcele'；
$.ajax({
url:“getComments.php”，
类型：“POST”，
async:true，
数据：{ajdi:ajdi，tabela:tabela}，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
$。每个（数据、功能（i、项）{
//创建html
瓦莱姆
塔克斯特·扎格拉夫耶
“+item.datum+”
“+item.komentar+”

'
$（'body'）.append（elem）；//追加项
});
},
错误：函数（数据）{
控制台日志（数据）；
}
});
});
});

您的数据类型错误，应该是：

dataType: "json", 

因为响应是

json

而不是

html

在成功功能中，请执行以下操作：

success: function(data) {
    var htm = '';  
    $.each(data, function(i, resp){
        htm +='<div class="notes">' + 
                 '<h4>Tekst zaglavlje</h4>' +
                 '<h5>'+resp.datum+'</h5>' +
                 '<p>'+resp.komentar+'</p>' +
             '</div>';
    }); 
    $('yourContainer').html(htm);
},

成功：函数（数据）{
var htm=''；
$。每个（数据、功能（i、resp）{
htm+=''+
“Tekst zaglavlje”+
''分别为+基准''+
“”+分别为komentar+”
”+
'';
}); 
$（'yourcainer'）.html（htm）；
},

---

由于您的响应似乎是一个数组

[{}，{}….]

或多个javascript对象，因此要生成这样的

html

标记，您必须使用

$在该数组中循环。each（）

方法并声明一个空白

var htm=''

在

$之前。each（）

迭代并将生成的html与json连接起来，然后将其放置在可以容纳生成的html的容器位置

---

成功：函数（数据）{
对于（变量i=0，上限=data.length；i<天花；i++）{
document.getElementById（“komenatri”）.innerHTML+=
“Tekst zaglavje”+
数据[i].数据+
“”+
数据[i].科门塔尔+
“
”；
}
}

您的成功函数应该如下所示：

success: function(data) {
    notes_div = $("<div/>");
    hfour = $("<h4/>").text("Tekst zaglavlje");
    hfive = $("<h5/>").text(data.datum);
    para = $("<p/>").text(data.komentar);
    notes_div.append(hfour).append(hfive).append(para);
    $('#komenatri').append();
},

到

---

这将阻止用户将他们自己的HTML添加到带有评论的页面中。

阅读此内容，并说：未捕获的语法错误：意外的标记非法更改仅此：$（“#komenatri”）。追加（elem）；把它延长一点。请重试。这意味着：未捕获的类型错误：无法使用“in”运算符在[{“datum”：“2014-05-22”，“komentar”：“Testiranje za komentare da vidimo kako moze da sluzi，dali radidobro，bla bla bla bla bla bla bla bla bla bla bla bla bla bla……”中搜索“162”]更改了代码。它不需要json，因此数据不是对象。现在它应该可以工作了；未捕获的TypeError:无法使用'in'运算符在[{“datum”：“2014-05-22”，“komentar”：“Testiranje za komentare da vidimo kako moze da sluzi，dali radidobro，bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla……”中搜索'162]为什么这不是一种安全的方法，打开XSS？那么您发布了一个错误的json对象。那么它可能是

{}，{}…

而不是

[{}，{}…]

@gmaestro为什么有

数据类型：“html”

？这不是

“json”

。现在这是从json创建HTML的安全方法吗？我不是投票人，但我想这是因为您提供了一个纯JavaScript onclick答案，而需要的显然是一个带有AJAX成功功能的JQuery答案。有点讨厌，先不要留下评论…是的，但这是不完整的答案，因为我需要为每个JSON对象创建html，我还需要将它添加到ID=komentarihm，不要工作，只是什么都没有发生。。。是否存在sintaks错误？@gmaestro我已更改了答案，因此生成的HTML将进入“#komentri”，请澄清。返回的每个对象是什么意思？在成功函数中，

数据

是否包含一个表单或所有表单的信息？？？@gmaestro您能告诉我吗。如果打开web开发人员控制台，是否会出现错误？是否存在id为“komenatri”的元素？

success: function(data) {
    for(var i = 0, ceiling = data.length; i < ceiling; i++) {
        document.getElementById("komenatri").innerHTML += 
            "<div class=\"notes\"><h4>Tekst zaglavje</hr><h5>" + 
            data[i].datum + 
            "</h5><p>" + 
            data[i].komentar + 
            "</p></div>";
    }
}

success: function(data) {
    notes_div = $("<div/>");
    hfour = $("<h4/>").text("Tekst zaglavlje");
    hfive = $("<h5/>").text(data.datum);
    para = $("<p/>").text(data.komentar);
    notes_div.append(hfour).append(hfive).append(para);
    $('#komenatri').append();
},

$temp[] = array('datum' => (string) $r['datum'], 'komentar' => (string) $r['komentar']);

$temp[] = array('datum' => htmlspecialchars( (string) $r['datum'] ), 'komentar' => htmlspecialchars( (string) $r['komentar']) );