Попытка использовать json для заполнения областей моего сайта, используя mysql, php и jquery

Question

Хорошо, так что это моя первая попытка сделать что-нибудь с JSON.Я много сделал с PHP и MySql, а также с jQuery и JavaScript ... но ничего с JSON.У меня есть некоторые данные в базе данных MySql.В приведенных ниже кодах я использую файл PHP для извлечения данных из базы данных MySql и использую json_encode для форматирования их в JSON.Этот файл вызывается JavaScript, который запускается при загрузке страницы (ну, на самом деле он работает на document.ready).Затем я использую jQuery для доступа к ключам и значениям JSON для динамического заполнения областей страницы.Вот фрагменты кода, которые я использую (извините за мою «глупость» при написании этих фрагментов, все еще изучаю все это).

Это мой скрипт, который находится на моей HTML-странице test.php:

<script type="text/javascript">
$(document).ready(function(){
 $.getJSON("json_events.php",function(data){
  $.each(data.events, function(i,events){
   var tblRow =
    "<tr>"
    +"<td>" + events.id + "</td>"
    +"<td>" + events.customerId + "</td>"
    +"<td>" + events.filingName + "</td>"
    +"<td>" + events.title + "</td>"
    +"<td>" + events.details + "</td>"
     +"<td>" + events.dateEvent + "</td>"
    +"<td><a href='assets/customers/testchurch/events/" + events.image + "'>" + events.image + "</a></td>"
    +"<td>" + events.dateStart + "</td>"
    +"<td>" + events.dateEnd + "</td>"
    +"</tr>"
   $(tblRow).appendTo("#eventsdata tbody");
  });
 });

    $.getJSON("json_events.php",function(data){
     $.each(data.events, function(i,events){
      $("#title").html("First event title: " + events.title + " ...");
     });
    });
});
</script>

Это код для php-файла, вызываемого вышеуказанным JS: json_events.php

<?php
require_once('includes/configread.php');

$arrayEvents = array();
$resultsEvents = mysql_query("SELECT * FROM events");

while($objectEvents = mysql_fetch_object($resultsEvents)) {
 $arrayEvents[] = $objectEvents;
}

$json_object_events = json_encode($arrayEvents);
$json_events = "{\"events\": " . $json_object_events . " }";

echo $json_events;

require_once('includes/closeconnread.php');
?>

Это мой JSONкоторый содержится в переменной $json_events из моего php-файла json_events.php:

{
    "events": [
        {
            "id": "2",
            "customerId": "1004",
            "filingName": "testchurch",
            "title": "Kenya 2011 Training Meeting",
            "details": "This meeting will be taking place on Sunday, February 10th @ 6pm.  Get ready for our annual Kenya trip in 2011.  We have been blessed to be able to take this trip for the past 3 years.  Now, it's your turn to bless others!  Come to this training meeting to learn how to minister to the people in Kenya and also learn what we'll be doing there.",
            "dateEvent": "2011-02-10",
            "image": "kenya2011.jpg",
            "dateStart": "2010-09-04",
            "dateEnd": "2011-02-10"
        },
        {
            "id": "6",
            "customerId": "1004",
            "filingName": "testchurch",
            "title": "New Series: The Journey",
            "details": "We will be starting our new series titled "The Journey".  Come worship with us as we walk with Paul on his 2nd missionary journey.",
            "dateEvent": "2011-01-02",
            "image": "",
            "dateStart": "2010-09-06",
            "dateEnd": "2011-01-02"
        }
    ]
}

Это мой HTML-код на test.php:

<table id="eventsdata" border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>customerId</th>
            <th>filingName</th>
            <th>title</th>
            <th>details</th>
            <th>dateEvent</th>
            <th>image</th>
            <th>dateStart</th>
            <th>dateEnd</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<div id="title"></div>

У меня есть два вопроса на самом деле ...

Вопрос 1: Этот код выглядит так, как будто он написан правильно на первый взгляд?

Вопрос 2: Я хочу иметь возможность выбрать только заголовок из события first в массиве JSON.Похоже, код, который я сейчас использую, выбирает заголовок второго события по умолчанию.Как мне это сделать?

Answer 1

Первое, что я хотел бы изменить, это то, что вы звоните $.getJSON("json_events.php"... дважды.Вы должны звонить только один раз, потому что данные не должны меняться между вызовами.Вы можете объединить два вызова вместе, но ...

Поскольку вы действительно хотите получить только первый заголовок события в результате этого блока:

$.getJSON("json_events.php",function(data){
    $.each(data.events, function(i,events){
        $("#title").html("First event title: " + events.title + " ...");
    });
});

Все, что вам действительно нужно, это добавитьэто к вашему первому $.getJSON вызову и избавиться от вышеуказанного блока:

$("#title").html("First event title: " + data.events[0].title + " ...");

Вы можете добавить это сразу после этого:

    $(tblRow).appendTo("#eventsdata tbody");
});

Это также решит проблему, почемуВы показываете название второго события.Вы перебирали все заголовки и устанавливали значение для последнего.

---

Еще одна вещь, на которую следует обратить внимание, это экранирование недопустимых символов в вашем ответе JSON.В одном из полей details есть кавычки, которые могут испортить данные.

Answer 2

Моя первая рекомендация заключается в том, что вместо использования конкатенации для построения строк таблицы используйте следующий подход.

$("<tr></tr>").append($("<td></td>").html(events.id)); 

и т.д.. Причина этого заключается в том, что вы будете использовать jQuery для предотвращения новейших и лучших атак XSS. В противном случае, если event.details содержит вредоносный код javascript, который вы используете.

Answer 3

Вопрос 1: На первый взгляд кажется неплохим, хорошее начало.

РЕДАКТИРОВАТЬ Хотя я бы посмотрел на параметр $ json_encode $ options .если это не просто жертва копирования-вставки, эти цитаты во второй записи приведут вас к неприятностям.(см. примеры в руководстве по PHP)

Вопрос2: Если вы посмотрите на параметры, переданные из $ .each, вы увидите, что аргумент i является счетчиком итераторов, вы должны иметь возможностьуправлять разделением первого элемента, используя сравнение внутри каждого блока.