AJAX и PHP-две разные ошибки в зависимости от типа данных JSON

Я пытаюсь привнести свои веб-навыки в 21-й век, изучая AJAX и PHP, но наткнулся на стену. Я хочу заполнить элемент управления select » recipe «с опциями в зависимости от того, что было выбрано из начального элемента управления select»category». Элементами опции для вторичного элемента управления «recipe» будут результаты анализа AJAX-запроса, выполненного для таблицы базы данных PostgreSQL. Функция «makeAjaxRequestCategory», показанная в коде ниже, является вызовом jQuery AJAX, который включает тип данных свойства: ‘json’. Вот в чем проблема. Лучше всего я могу понять, что проблема возникает, когда я включаю это свойство и позволяю коду работать, который, вместо того, чтобы возвращать что-то с результатами, которые я могу разобрать, возвращается как ошибка… Но объект response также указывает статус 200 (который является»OK»… так почему же это интерпретируется как ошибка?). Свойство responseText объекта response включает следующее:

responseText:"<br />↵<b>Parse error</b>:  syntax error, unexpected '}', expecting ',' or ';' in <b>C:Bitnamiwampstack-5.5.38-0apache2htdocsajaxSelectCategory.php</b> on line <b>8</b><br />↵

Когда я замечаю свойство dataType и запускаю его без него, я получаю другую ошибку:

jquery.min.js:4 Uncaught TypeError: Cannot use 'in' operator to search for '179' in <br />(…)

Кажется, что правильный способ сделать это-установить тип данных в JSON, а затем проанализировать объект JSON, который я получаю обратно из PHP, но вместо этого я, кажется, получаю противоречивый ответ, как ошибку, так и ответ 200 в то же время. Обратите внимание, что первоначальный вызов PHP для заполнения элемента управления «category» работает нормально. Любое руководство, которое вы можете дать по получению успешного ответа, который я могу разобрать, было бы наиболее оценено!

Вот моя среда разработки:

  • Локальная разработка с «localhost» на ноутбуке Windows 10
  • Apache web server V. 2.4.23 (Win32)
  • PostgreSQL версии 9.6.1
  • Запуск его в Chrome и использование Chrome DevTools для устранения неполадок

Вот главный файл recipesystem.php’, который я запускаю в браузере:

 <!DOCTYPE html>
  <html>
  <head>
  </head>
<body>

Version 317.0<br><br>

<div class = 'selection'>
<table id='selectiontable'>
  <tr>
    <td>Select Recipe Category</td>
  </tr>
  <tr>
    <td>
      <select id="category">
      <option value='Select a category...'></option>
      <?php
        $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX");
        $result = pg_query($connection,"SELECT category FROM recipesystem.recipe ORDER BY category;");
        while ($row = pg_fetch_assoc($result)) {
          unset($category);
          $category = $row['category'];
          echo '<option value="'.$category.'">'.$category.'</option>';
        };
      ?>
    </td>
  </tr>
</table>
</div>
<br>

<select id="recipe">
<option value='Select a recipe...'></option>
</select>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
  // This is for the Category selector...
  $('#category').on('change', function(){
    $('#recipe').empty();
    var selected = $(this).val();
    makeAjaxRequestCategory(selected);
    })
  function makeAjaxRequestCategory(opts){
    $.ajax({
      type: 'POST',
      data: { opts: opts },
      dataType: 'json',
      url: 'ajaxSelectCategory.php',
      success: function(res) {
        console.log("Success...")
        console.log(res)
        $.each(res, function(i, value) {
          console.log(value)
         })
        },
      error: function(res){
        console.log("There was an error...")
        console.log(res)
        }
    })
  }
</script>

</body>
</html>

ajaxSelectCategory.РНР

<?php
    echo "<script> console.log('Starting PHP script....');</script>";
    $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX") or die("Connection Error");
    $result = pg_query($connection,"SELECT name, category FROM recipesystem.recipe ORDER BY category;");
    while ($row = pg_fetch_assoc($result)) {
        echo "$('#recipe').append('<option>newvalue</option>');"
    };
?>

2 ответа

  1. Ok, сначала код HTTP 200 OK, что означает, что запрос был отправлен с последующим ответом. Code 200 не гарантирует, что в теле ответа нет ошибок, в основном потому, что HTTP-запрос обрабатывается Apache, а ошибка, которую вы видите, создается при выполнении вашего кода с PHP. Если бы все не было таким абстрактным, каждый язык, который хотел бы обрабатывать HTTP-запросы, реализовывал бы различные коды, и это не является реальной ответственностью языка.

    Во-вторых, когда вы определяете dataType: 'json'на своем запросе ajax, вы говорите «Эй, я хочу получить данные в формате json», так как вы ajaxSelectCategory.php-скрипт не повторяет данные в формате json, вы получаете ошибку от браузера, потому что парсер JSON не понимает, что вы получаете, он настроен на декодирование JSON, но он не закодирован как JSON.

    Так что либоdataType: 'html', и рассматривать resв целом строку с HTML-кодом, или вы делаете массив с результатами и эхо json_encode()его, только тогда вы сможете итерацию через него, как вы хотите в $.each(res, function(i, value) {

  2. очень рад переехать из старых веков,
    Необходимо изменить ajaxSelectCategory.php, чтобы выглядеть так:

    <?php
        echo "<script> console.log('Starting PHP script....');</script>";
        $connection = pg_connect("host=localhost port=5432 dbname=recipes user=postgres password=XXXXXXXX") or die("Connection Error");
        $result = pg_query($connection,"SELECT name, category FROM recipesystem.recipe ORDER BY category;");
    $output=array();
        while ($row = pg_fetch_assoc($result)) {
            $output[] = $row['field name'];
        };
    echo json_encode($output);
    ?>
    

    И ваш обратный звонок успеха :

    success: function(res) {
            console.log("Success...")
            console.log(res)
            $.each(res, function(i, value) {
              $('<option>'+value+'</option>').appendTo($('#recipe'));
             })
            },