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

因此，这是从服务器获取数据并将其附加到列表的基本方式。当然，您可以更改生成的输出，甚至可以使JSON数组复杂化以获得更精彩的输出。

希望有所帮助，
spryno724

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，那么这是我所知道的唯一其他选择。

希望有所帮助，
spryno724

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

2 个答案: