困惑如何正确使用jquery getJSON

Question

我正在尝试使用 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 的建议更改了我的代码，但它仍然无法正常工作。 alert(data) 确实返回了整个 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");



    });
});

---

我终于找到了我的问题！我在 php 端使用 json_encode 将请求作为 json 发送回。 .get 调用在 AS JSON 中读取它（注意最后一个参数）并自动将其转换为 javascript 对象。因此，我的 parseJSON 行当然行不通，我正在解析一个 javascript 对象，而不是 json 文本！！

Answer 1

您的 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);

Answer 2

我不知道这是否是唯一的问题，但根据我在代码中添加的 cmets 和下面的解释，我可以看到以下代码存在两个问题：

$.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”中的 all 输入更新为当前项目。

我建议您首先将调试console.log(data) 或alert(data) 语句放入以确认您的回调实际上正在被调用，以及它正在接收什么数据。 （我已经在上面添加了。）

然后要解决问题 (2)，您需要将各个输入分配给 JSON 中的适当值，但如果没有看到 JSON 的结构，我真的无法建议如何做到这一点。

编辑：刚刚看到 hyperslug 的答案 - 这就是我在谈论问题 (2)。假设您的 JSON 是一个简单的数组，其中的元素与您的输入一一对应，应该可以完美运行。如果您的 JSON 更复杂，请更新您的问题以显示其格式。

Answer 3

选择器$("input#autofill") 可能什么也不返回。 没有 ID 属性为“自动填充”的输入

Answer 4

我认为错误在这里：

$isbns=[$i] = $entry;

应该是：

$isbns[$i] = $entry;

Answer 5

您的 PHP 可能需要一点改进：

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

echo json_encode($isbns);

但是，为什么要使用 AJAX 调用来填写 html 表单，使用与最初生成表单的 PHP 脚本相同的源数据？