Question

这里我有一个很好的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>'

我从JSON获得的每个对象......就像那样：

            success: function(data) {
            // CREATE A HTML FROM JSON DATA FOR EACH JSON OBJECT. HOW?
            console.log(data);  
            },

使用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';
  }

Answer 1

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

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);
},

由于您的响应似乎是一个数组[{},{}....]或多个javascript对象，因此要生成此类html标记，您必须使用$.each()方法在该数组中循环并声明一个空白{{ 1}}在var htm='';迭代之前，将生成的html连接到json之外，然后放在容器的位置，该位置可以保存生成的html。

Find a Demo @ Fiddle

Answer 2

由于你正在使用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); 
            }
        });
    });
});

Answer 3

您的成功功能应如下所示：

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构建为字符串是不安全的。他们向您开放XSS（google it;））但我们通过将元素设置为JQuery对象并设置其.text()来确保结果内容HTML安全。

在输出数据之前，您还应该通过PHP中的htmlspecialchars()运行数据。

变化：

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

要

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

这样可以防止用户通过评论将自己的HTML注入您的网页。

Answer 4

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>";
    }
}

从JSON对象创建HTML

4 个答案:

Find a Demo @ Fiddle