json_encode печать html блока на успехе ajax, нужен совет

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