json_encode 在ajax上成功打印html块，需要建议

Question

我正在学习如何使用 AJAX 和 PHP json_encode()。我使用 json_encode() 作为 AJAX POST 响应返回一个数组：

$.post("<?php echo base_url();?>index.php/post/post_insert_ajax/",{
        text: post_wall, type:type, entity_id:entity_id, poster_id:poster_id
    },
    function (data){
        var postObj = $.evalJSON(data);                                 
        $("ul#post_already").prepend(//something);
        $("ul#post_already li:first").slideDown("slow");
        $('#post_wall').val("");   
    });

我正在使用 jquery.json.js 分解返回的数组，并且我想显示此块的 html 到 $("ul#post_already")

<a id='"+postObj.post_id+"' href='board/?p="+postObj.post_id+"' >
    "+postObj.post_text+"
</a>
Created on: "+postObj.created_timestamp+"<a class='showCommentBox' id='"+postObj.post_id"' href='#' >Comment</a>                                               
<div id='commentContainer-"+postObj.post_id+"' class='commentContainer' style='display:none;'>
                <form class='submit_comment' id='"+postObj.post_id+"' action='#'>
                    <textarea name='text' id='commentText-"+postObj.post_id+"' class='commentText'></textarea>
                    <input type='submit' name='submit' value='Post Comment' id='"postObj.post_id"' class='submit_comment' />
                    <input type='hidden' name='user_id' id='user_id' value='"+postObj.user_id+"' />
                </form>
            </div>
<ul id='comment_post"+postObj.post_id+"'></ul></li>

我试图将所有这些放入 .prepend() 中，但似乎不是这样工作的，什么我应该做什么来实现这个目标？非常感谢。

更新：事实证明我错过了一些代码上的连接符号，所以同时我的解决方案是这样的：

block = "<b>"+user_name+"</b> posted on ";
block += "<br/><a id='"+postObj.post_id+"' href='<?php echo base_url();?>board/?p="+postObj.post_id+"' >"+postObj.post_text+"</a>";
block += "<br />Created on: "+postObj.created_timestamp+"&nbsp;<a class='showCommentBox' id='"+postObj.post_id+"' href='#' >Comment</a>";
block += "<div id='commentContainer-"+postObj.post_id+"' class='commentContainer' style='display:none;'>";
block += "<form class='submit_comment' id='"+postObj.post_id+"' action='#'><textarea name='text' id='commentText-"+postObj.post_id+"' class='commentText'></textarea>";
block += "<input type='submit' name='submit' value='Post Comment' id='"+postObj.post_id+"' class='submit_comment' />";
block += "<input type='hidden' name='user_id' id='user_id' value='"+postObj.user_id+"' />";
block += "</form></div><ul id='comment_post"+postObj.post_id+"'></ul></li>";

成功后我调用了 HTML：

$("ul#post_already").prepend(HTML);

它现在可以工作，但我仍然认为这是凌乱的线条，而不是最佳实践，有没有解决方法可以做到这一点？？？

Answer 1

就我个人而言，我喜欢使用 $.parseJSON() 方法将 JSON 数组转换为数据JavaScript 可以使用。所以，回到答案，假设我们有一个来自服务器的数组，在进行 JSON 编码之前：

$array = array('one' => '1', 'two' => '2', 'three' => '3', 'four' => '4');

您可以使用 jQuery 来获取数据，然后像这样迭代数据：

var HTML;
var returnedData = $.parseJSON(data);

$.each(returnedData, function(key, value) {
  HTML += '<li>' + value + '</li>';
});

$('.unorderedList').append(HTML);

所以，这是一个基本的 /em> 从服务器获取数据并将其附加到列表的方式。当然，您可以更改生成的输出，甚至可以使 JSON 数组复杂化以获得更奇特的输出。

希望有帮助，
斯普里诺724

Answer 2

尽管在没有真正了解其整体工作原理的情况下很难提供直接指针，但您可以在页面上已有这些元素。

<span class="userName" style="font-weight:bolder"></span> posted on <br />
<a class="viewer" ></a><br />
Created on: <span class="created"></span>
<!-- ... and so on //-->

虽然我没有包含整个代码，但它应该能够表达要点。您可以使用 jQuery 来操作页面上的代码。因此，从上到下更改每个值：

$('span.userName').text(user_name);
$('a.userName').attr('id', postObj.post_id);
$('span.created').text(postObj.created_timestamp);
// ... and so on

根据您正在做的事情，它可能不起作用，但如果您想避免看起来凌乱的 JavaScript，这是我所知道的唯一其他选择。

希望有帮助，
斯普里诺724