jquery ajax返回php脚本的文本而不是json

Question

我有一个直接执行时可以正常工作的 php 脚本： PHP：

<?php
    header('Content-Type: application/json');
    $fileName = "../appfiles/Courses.json";
    if (file_exists($fileName)) 
      {
    $json = json_decode(file_get_contents($fileName), true);
        echo json_encode($json);
      } 
    else 
      {
        echo "The file $fileName does not exist";
      }
    ; 
?>

跑步

http://localhost/RickVideos/php/getRegCourses.php

，我明白了：

[{"coursecode":"ACCTD_001","cflag":"Y","pflag":"Y","dateregistered":"08\/11\/14","timeregistered":"12:55 pm."},{"coursecode":"LWPRG1_004","cflag":"Y","pflag":"Y","dateregistered":"08\/18\/14","timeregistered":"3:30 pm."},{"coursecode":"LWPRG2_005","cflag":"Y","pflag":"Y","dateregistered":"08\/18\/14","timeregistered":"3:32 pm."}]

尝试从 jquery ajax 运行 php，返回的似乎是脚本文本而不是 json 数据。

JavaScript：

// registered courses

var 注册课程 = {

init: function () 
    {
        $.ajax(
            {   
                type: 'POST',
                dataType: "JSON",
                url: "php/getRegCourses.php",
            }
        )

        .done(function(data) 
            { 
                $.each(data, function(index, element) 
                    {
                        $('#registeredCourses').append(
                        $('<option value="' +   index + '">' + this['coursecode'] + '</option>')
                        );
                    }
                );      
                $('#registeredCourses').val('0');
                $("#registeredCourses").trigger('chosen:updated');
                registeredCourses.getSelected();    
            }
        )
        .fail (function(jqXHR, textStatus, errorThrown )
            {
                alert('request failed :'+errorThrown);
                alert ('textStatus :'+textStatus);
                console.log(jqXHR);
            }
        );
    },

getSelected: function () 
    {
        $.ajax(
            {
                type: 'GET',
                url: "getSelCourseInfo.php",
                data: 
                    {
                        course: $("#registeredCourses option:selected").text() 
                    }
            }
        )

        .done(function( data ) 
            {
                $("#courseCode").val($("#registeredCourses option:selected").text());
                $("#courseTitle").val(data.Title);
                $("#projectManager").val(data.ProjectManager);                         
                $("#initRegDate").val (data.LastModDate + ' at ' +  data.LastModTime);

                var tasks = [ ];
                $.each(data.ProjectTasks, function(i, item) 
                    {       
                        $("#projectTasks").append(
                            '<tr>' +
                            '<td>' + this + '</td>' +
                            '</tr>'
                        );
                        tasks[i] = this;
                    }
                );

                var projectMems = [ ];
                $.each(data.ProjectMembers, function(i, item)
                    {       
                        $("#projectMembers").append(
                            '<tr>' +
                            '<td>' + this.PersonName + '</td>' +
                            '<td>' + this.EmailAddress + '</td>' +
                            '</tr>'
                        );
                        projectMems[i] = this.PersonName;
                    }
                );

                $("#selectedCourseData").find("tr:gt(0)").remove();
                $.each(data.Chapters, function(i, item) 
                    {
                        $("#selectedCourseData").append(
                            '<tr>' +
                            '<td>' + this.label + '</td>' +
                            '<td>' + this.title + '</td>' +
                            '<td>' + registeredCourses.makeList('Sciptwriter1', i, projectMems, this.ScriptWriter) + '</td>' +
                            '<td>' + registeredCourses.makeList('Recorder1', i, projectMems, this.Recorder) + '</td>' +
                            '<td>' + registeredCourses.makeList('Status1', i, tasks, this.Status) + '</td>' +
                            '<td>' + registeredCourses.makeList('Assignedto1', i, projectMems, this.Assignedto) + '</td>' +
                            '</tr>'
                        );
                    }
                );

            }
        ); 


    },

    makeList: function (cname, num, array, selected) 
        {
            var string = '<select class="' + cname +'">';
            if (selected== " " && array[0] != " ") 
                {
                array.splice(0, 0, " ");
            };
            for (var i=0; i < array.length; i++) 
                {
                    if (array[i]==selected) 
                        {
                            string = string + '<option value="' + array[i] + '" selected>' + array[i]  + '</option>';
                    }
                    else 
                        {
                            string = string + '<option value="' + array[i] + '">' + array[i]  + '</option>';
                    };
            };

            string = string + '</select>';
            return string;
        }

};

第一个警报显示：

请求失败：SyntaxError：JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符

第二个警报显示：

文本状态：解析器错误

jqXHR 对象的响应文本显示：

"<?php header('Content-Type: application/json'); $fileName = "../appfiles/Courses.json"; if (file_exists($fileName)) { $json = json_decode(file_get_contents($fileName), true); echo json_encode($json); } else { echo "The file $fileName does not exist"; } ; ?> "

为什么显示的是脚本文本而不是 json 数据？

Answer 1

不确定这是否有帮助，但以下代码对我有用。使用您的 json、php 和 html 文件设置一个目录，基本上只是填充选择菜单。这对我来说很好，在查看您的代码时出现了一些 js 错误：

$('<option value="' + index + '">' + this['coursecode'] +/option>') 在选项关闭标记之前缺少'<

在fail 末尾的) 之后还缺少}。修复这些文件后，您的代码在填充下拉列表时对我有用，但您会收到 js 错误，因为 registeredCourses.getSelected(); 不存在。这让我想知道上面的代码是否完整？

如果这一切都无济于事，那么您是否查看了直接访问 php 文件时输出的原始 html，例如查看源代码？

`bonk.php`
<?php
    header('Content-Type: application/json');
    $fileName = "courses.json";
    if (file_exists($fileName))
      {
    $json = json_decode(file_get_contents($fileName), true);
        echo json_encode($json);
      }
    else
      {
        echo "The file $fileName does not exist";
      }
    ;
?>

`courses.json`
[
    {
        "coursecode": "ACCTD_001",
        "cflag": "Y",
        "pflag": "Y",
        "dateregistered": "08/11/14",
        "timeregistered": "12:55 pm."
    },
    {
        "coursecode": "LWPRG1_004",
        "cflag": "Y",
        "pflag": "Y",
        "dateregistered": "08/18/14",
        "timeregistered": "3:30 pm."
    },
    {
        "coursecode": "LWPRG2_005",
        "cflag": "Y",
        "pflag": "Y",
        "dateregistered": "08/18/14",
        "timeregistered": "3:32 pm."
    }
]

`html file`
<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>

    var registeredCourses = {
      init: function (){
        $.ajax ({
          type: 'GET',
          dataType: "JSON",
          url: "bonk.php",
        })

        .done(function(data){
          $.each(data, function(index, element){
            $('#registeredCourses')
              .append($("<option></option>")
              .attr("value",index)
              .text(this['coursecode']));
          });
        })

        .fail (function(jqXHR, textStatus, errorThrown){
          console.log(errorThrown, textStatus, jqXHR);
        })
      }
    };

    registeredCourses.init();
  </script>
  </head>
  <body>
    <select name="test" id="registeredCourses"></select>
  </body>
</html>

Answer 2

我将 php 文件和 Courses.json 文件都转换为 utf-8，它现在可以运行了。