未捕获的SyntaxError：意外的令牌＆lt; VM3419：1

Question

我正在使用AJAX技术创建一个演示。在我的项目中，我使用AJAX方法从服务器获取数据。但是我得到了这个错误：

  

“未捕获的SyntaxError：意外的令牌＆lt; xhr.onreadystatechange @ main.js”

JS：

using System;

namespace Using_methods_to_reverse_an_array
{
    class Program
    {
        static int[] CreateArray()
        {
            int[] array = new int[] {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
            return array;
        }

        static void PrintNumbers(int[] array)
        {
            foreach (int numbers in array )
            {
                Console.WriteLine(numbers);
            }
        }

        static void ReverseNumbers(int[] array)
        {
            for (int i = 0; i < array.Length/2; i++)
            {
                int temp = array[i];
                array[i] = array[array.Length - i - 1];
                array[array.Length - i - 1] = temp;
            }

        }

        static void Main(string[] args)
        {
            int[] numbers = CreateArray();
            ReverseNumbers(numbers);
            PrintNumbers(numbers);
            Console.ReadLine();
        }
    }
}

PHP：

(function(){
	var xhr = null;
	if(window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else{
		xhr = new XMLHttpRequest();
	}

	xhr.open("GET","data/stuInfo.php",true);
	xhr.send();

	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var HTML = "";
				
				var data = eval("("+xhr.responseText + ")");
				
				for(var i =0;i<data.length;i++){
					HTML += "<li><span>"+data[i].Code+"</span>";
					HTML += "<span>"+data[i].Name+"</span>";
					HTML += "<span>"+data[i].Score+"</span></li>";
				}
				document.getElementByID("stuInfo").innerHTML = HTML;
			}
		}
	};

	
})();

Answer 1

以下几点需要改变：

1. 看来PHP代码没有对$stulist做任何事情。尝试将echo或print与JSON格式的数据一起使用，如下面的更新示例所示。
2. 您应该能够使用JSON.parse() - 即eval()，而不是将var data = JSON.parse(xhr.responseText)与响应文本一起使用，因为内容类型的标头是`test / json。请参阅下面的第二个代码段。
3. 对document.getElementById的调用在函数名末尾有一个大写D而不是小写d。将其更改为小写d以避免错误。

<强> PHP：

<?php
header("Content-type:text/json");
$stulist = array(
    array("Code" => "10101", "Name" => "刘真真", "Score" => "530"),
    array("Code" => "10102", "Name" => "张明基", "Score" => "460"),
    array("Code" => "10103", "Name" => "舒虎", "Score" => "660"),
    array("Code" => "10104", "Name" => "周小敏", "Score" => "500"),
array("Code" => "10105", "Name" => "陆明明", "Score" => "300")
);
echo json_encode($stulist);
?>

<强> JS：

(function(){
	var xhr = null;
	if(window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else{
		xhr = new XMLHttpRequest();
	}
        //sample API request to get sample data in  JSON format - replace the second parameter with your endpoint "data/stuInfo.php"
    	xhr.open("GET","http://elliott.andrewz.org/data/stuInfo.php",true);
	xhr.send();

	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var HTML = "";
				
				//use JSON.parse here instead of eval()
				var data = JSON.parse(xhr.responseText);
				//reveal what that data object is:
				console.log('data: ',data);
              
				for(var i =0;i<data.length;i++){
					HTML += "<li><span>"+data[i].Code+"</span>";
					HTML += "<span>"+data[i].Name+"</span>";
					HTML += "<span>"+data[i].Score+"</span></li>";
				}
				document.getElementById("stuInfo").innerHTML = HTML;
			}
		}
	};

	
})();

更新

在评论中，您提到您仍然看到错误。您是否尝试使用浏览器控制台的网络选项卡来观察AJAX请求以查看响应代码和正文是什么？在下面的屏幕截图中，我正在Google Chrome中查看此场景中的AJAX请求（可以通过按 F12 或 CTRL + SHIFT 打开它+ I 的）。 Mozilla Firefox，Safari和最新版本的IE / Edge都有类似的控制台。我已过滤到 XHR 请求，并看到response code为200。如果您看到不同的数字（例如400,500），则可能在找到文件或代码时出错。