Я сделал ajax-форму с ответом json. В массиве json содержится информация из базы данных mysql. Теперь я хочу показать эти данные в таблице.
Я создал местозаполнитель в html-файле, который скрыт.
Здесь мой код для части ajax / json:
$("#select_coffee_talk_year").button().click(function() { var form = $('#coffee_talk_year'); var data = form.serialize(); $.ajax({ url: "include/scripts/select_event.php", type: "POST", data: data, dataType: 'json', success: function (select) { //alert(select.ID[0]); //alert(select.ID[1]); //alert(select.ID.length); $("#coffee_talk").fadeOut(); $("#coffee_talk").fadeIn(); } }); return false; });
Это мой html:
<p class="bold underline headline">Bereits eingetragen:</p> <form id="coffee_talk_year" action="include/scripts/select_event.php" method="post" accept-charset="utf-8"> <select name="year_coffee_talk" id="year_coffee_talk"> <option value="none" class="bold italic">Jahr</option> <?php for($i=2008; $i<=$year; $i++){ if ($i == $year) { echo "<option value=\"".$i."\" selected=\"$i\">".$i."</option>\n"; } else echo "<option value=\"".$i."\">".$i."</option>\n"; } ?> </select> <button id="select_coffee_talk_year">anzeigen</button> <input type="hidden" name="coffee_talk_year_submit" value="true" /> </form> <br /> <div id="coffee_talk"></div> <br /> <button id="add_coffee_talk">hinzufügen</button>
select_event.php:
if ('POST' == $_SERVER['REQUEST_METHOD']) { /*******************************/ /** Erzaehlcafe auswählen /*******************************/ if (isset($_POST['coffee_talk_year_submit'])) { $getID = array(); $getDate = array(); $getTheme = array(); $getContributer = array(); $getBegin = array(); $getPlace = array(); $getEntrance = array(); $getFlyer = array(); $sql = "SELECT ID, Date, Theme, Contributer, Begin, Place, Entrance, Flyer FROM Coffee_talk WHERE YEAR(Date) = '".mysqli_real_escape_string($db, $_POST['year_coffee_talk'])."' "; if (!$result = $db->query($sql)) { return $db->error; } while ($row = $result->fetch_assoc()) { $getID[$i] = $row['ID']; $getDate[$i] = $row['Date']; $getTheme[$i] = $row['Theme']; $getContributer[$i] = $row['Contributer']; $getBegin[$i] = $row['Begin']; $getPlace[$i] = $row['Place']; $getEntrance[$i] = $row['Entrance']; $getFlyer[$i] = $row['Flyer']; $i++; } $result->close(); $response['ID'] = $getID; $response['Date'] = $getDate; $response['Theme'] = $getTheme; $response['Contributer'] = $getContributer; $response['Begin'] = $getBegin; $response['Place'] = $getPlace; $response['Entrance'] = $getEntrance; $response['Flyer'] = $getFlyer; echo json_encode($response); } }
Div с id = coffee_talk является моим заполнителем. Теперь я хочу затухать в таблице своими данными, и если я изменю год и отправлю его с помощью кнопки, я хочу вытереть старый и выпустить новый.
Моя единственная проблема в том, что мне нужно написать эту таблицу в php с циклами. Но я думаю, что это невозможно в Java Script. Что мне делать?
PS Я использовал ajax, потому что я не хочу постоянно перезагружать.
Ваше быстрое решение:
$("#select_coffee_talk_year").button().click(function() { var form = $('#coffee_talk_year'); var data = form.serialize(); $.ajax({ url: "include/scripts/select_event.php", type: "POST", data: data, dataType: 'json', success: function (select) { var coffee_talk = $("#coffee_talk"); coffee_talk.fadeOut('fast', function() { for(i in select) { row = select[i]; div = coffee_talk.append('<div id="row_'+i+'" />'); for(column in row) { div.append('<span class="column_'+column+'">'+row[column]+'</span>'); } } coffee_talk.fadeIn(); }); } }); return false; });
Для более удобного подхода вы должны искать Moustache.js, который является механизмом JavaScript для шаблонов на стороне клиента (который имеет эквиваленты в PHP / Java / Ruby / Python / Go и других языках и основан на Google CTemplates).
Это позволит вам создавать шаблоны HTML и заполнять их данными, которые у вас есть в переменной, такой как переменная JSON, которую может получить запрос AJAX.