запутался, как правильно использовать jquery getJSON


Я пытаюсь использовать jquery getJSON получить информацию для моей таблицы из файла php, и это не работает. Может ли кто - нибудь дать мне несколько советов о том, где я иду неправильно:

Javascript:

$(document).ready(function(){   
$("input#autofill").click(function()
{
$.get("last_year_ISBN.php",
    function(data){
    var isbns = $.parseJSON(data);  //creates a javascript object.
                  $.each(isbns, function(){
                    var elements = document.getElementById("booklist").getElementsByTagName("input");
                    for (var i=0, i<elements.length; i++)
                    {
                        elements[i] = this;
                    }
                    });
                  },
                  "json");

    });
});

HTML / php

<?php
            $file = fopen("SGS_Fall_Booklist.csv", "r");
            $entry= fgetcsv($file);
            echo $entry[0] . $_GET["program"] . $entry[1] . $GET["school"] . $entry[2] . $GET["term"] . "<br>";
            //COMMENTED OUT FOR TESTINGecho "<input type='submit' name='checkall' value='AutoFill (last years ISBN's)'></input><br>";
            //if ($entry[0] == $_GET["program"] && $entry[1] ==$GET["school"] && $entry[2] == $GET["term"])
            //{                                 
            echo "<table id='booklist'><tr>
                             <th>Edit</th>
                             <th class='coursename'>" . $entry[6] . "</th>
                             <th class='startdate'>" . $entry[7] . "</th>
                             <th class='booktitle'>" . $entry[17]. "</th>
                             <th class='author'>" . $entry[18]. "</th>
                             <th class='isbn'>" . $entry[16]. "</th>
                         </tr>";
            while(! feof($file))
            {
                $entry = fgetcsv($file); 

                echo    "<tr>
                            <td><input type='checkbox'></input></td>
                            <td class='coursename'>" . $entry[6] . "</td>
                            <td class='startdate'>" . $entry[7] . "</td>
                            <td class='booktitle'>" . $entry[17]. "</td>
                            <td class='author'>" . $entry[18]. "</td>
                            <td class='isbn'><input class='ISBN_number' type='text' value='";               

                if(isset($_GET["checkall"]))
                {
                    echo $entry[16];
                }
                echo        "'size='13' maxlength='13'></input></td>    
                      </tr>";                   
            }

            //}
            echo "</table>";
            fclose($file);

?>

Внешний php-файл

<?php
$file = fopen("SGS_Fall_Booklist.csv", "r");
$entry = fgetcsv($file);    //discard the first title line
$i=0;
while(! feof($file))
{
    $entry = fgetcsv($file); 

    $isbns=[$i] = $entry;
    $i++;
}
fclose($file);
echo json_encode($isbns);
?>

Я изменил свой код, как предложил hyperslug, и он по-прежнему не работает. Предупреждение (данные)возвращает всю инструкцию json. Чего мне не хватает?

$(document).ready(function(){   
    $("input#autofill").click(function()
    {
        $.get("last_year_ISBN.php",
                  function(data){
                  alert(data);
                  var isbns = $.parseJSON(data);    //creates a javascript object.
                  var elements = $('#booklist .ISBN_number');
                  $.each(isbns, function(index, obj){
                    //var elements = document.getElementById("booklist").getElementsByTagName("input");
                    //for (var i=0, i<elements.length; i++)
                    //{
                        //elements[i].value = this;
                    //}
                    $(elements[index]).val(obj);
                    });
                  },
                  "json");



    });
});

Я наконец-то разобрался со своим проблема! Я использую json_encode в PHP, который отправляет запрос обратно в виде JSON. То.get call считывал его как JSON (обратите внимание на последний параметр) и автоматически превращал в объект javascript. Поэтому, конечно, моя строка parseJSON не будет работать, я разбирал объект javascript, а не текст json!!

5 2

5 ответов:

Ваш цикл jQuery .each дает вам индекс и ссылку на каждый объект в isbns. Если isbns является простым массивом и имеет точно такое же количество элементов, как ваш booklist имеет строки,

var elements = $('#booklist .ISBN_number');
$.each(isbns, function(index, obj){
    $(elements[index]).val(obj);
});

Следует заполнить поля ISBN <input>.

Если isbns На самом деле является массивом объектов, вам придется ссылаться на это значение по имени:

    $(elements[index]).val(obj.ISBN);

Я не знаю, Единственная ли это проблема, но я вижу две проблемы со следующим кодом, согласно комментариям, которые я добавил в код, и объяснению ниже:

$.get("last_year_ISBN.php",
   function(data){

      alert(data); // <--- NEW DEBUGGING ALERT HERE

      var isbns = $.parseJSON(data);  //creates a javascript object.
      $.each(isbns, function(){
         var elements = document.getElementById("booklist").getElementsByTagName("input");
         // PROBLEM: you're setting all input elements to the current item
         //          from the $.each
         for (var i=0, i<elements.length; i++)
         {
            elements[i] = this; // <--- SHOULD BE elements[i].value = this
         }
      });
   },
   "json"
);
  1. Я предполагаю, что вы намерены обновить входные данные HTML для отображения данных из вашего JSON. Для этого вам нужно сказать elements[i].value = this, или, с помощью jQuery, $(elements[i]).val(this).

  2. Ваш цикл $.each перебирает все элементы из вашего JSON, но для каждого элемента вы затем запускаете один и тот же цикл for и обновляете все входные данные в "booklist" для текущего элемента.

Я бы предложил сначала ввести отладочный оператор console.log(data) или alert(data), чтобы подтвердить, что ваш обратный вызов действительно вызывается и какие данные он получает. (Я добавил Это выше.)

Затем, чтобы решить проблему (2), вам нужно назначить отдельные входные данные соответствующим значениям из вашего JSON, но я не могу действительно предложить, как это сделать, не видя структуру JSON.

Правка: только что видел ответ гиперслуга - это то, о чем я говорил с проблемой (2). Предположим, что ваш JSON-это простой массив с элементами, которые соответствуют один к одному вашим входам, которые должны работать идеально. Если ваш JSON более сложный, пожалуйста, обновите свой вопрос, чтобы показать его формат.

Селектор $("input#autofill"), вероятно, ничего не возвращает. Нет входа с атрибутом ID 'autofill'

Я думаю, что ошибка здесь:

$isbns=[$i] = $entry;

Должно быть:

$isbns[$i] = $entry;

Ваш PHP может использовать небольшое улучшение:

$isbns = array();
while ($line = fgetcsv($file)) {
   $isbns[] = $line;
}

echo json_encode($isbns);

Однако, почему вы используете AJAX-вызов для заполнения html-формы, используя те же исходные данные, что и PHP-скрипт, который сгенерировал форму в первую очередь?