【问题标题】:Console Error - Parsing AJAX JSON Parsing控制台错误 - 解析 AJAX JSON 解析
【发布时间】:2017-05-08 06:35:59
【问题描述】:

我在 AJAX 解析我正在创建的 Web 服务中的 JSON 数组时遇到了问题。我的前端是一个简单的 ajax 和 jquery 组合,用于显示从我正在创建的 web 服务返回的结果。

尽管知道我的数据库查询有结果,但我在 Chrome 的控制台中收到一条错误消息,指出“无法读取未定义的长度属性”。

在寻找答案几天后,我仍然无法弄清楚为什么会出现控制台错误。

感谢您的帮助! :)

function ajaxrequest(e)
{	
	var r = $('#region').val();
	var t = $('#type').val();
	console.log(r,t);
	$.ajax('https://URL...../.../POI/POI_LOOKUP.php',
	{ type: 'GET',
				data: 'type='+t+'&region='+r+'&format=json',
				success: onSuccess }
	);
}

function onSuccess(data,status,xmlHTTP)
{
	var html = "<table><th>name</th><th>type</th><th>country</th><th>region</th>";
	for(var i=0; i<data.length; i++)
	{
	html = html + '<tr><td>' + data[i].name + '</td>' + '<td>' + data[i].type + '</td>' + '<td>' + data[i].country + '</td>' + '<td>' + data[i].region + '</td></tr>'; 	
	}
	html = html + '</table>';
	$('#results').html(html);
	console.log(data);
	console.log(status);
}

这是我的 PHP 搜索并返回所有结果:

IF ($type == "any" && !isset($region)) /* Search DB for all types of POI for all regions*/
    {
        $statement = $conn->prepare("SELECT * FROM pointsofinterest;");
        $statement->execute();
        $row = $statement->fetch();

        if ($row == false)
        {   
            header("HTTP/1.1 204 No Content");
        }
        else
        {
            $allResults = array();
            while($row != false) 
            {
                $allResults[] = $row;
                $row = $statement->fetch(PDO::FETCH_ASSOC);
            }
            echo json_encode($allResults);
        }
    }

【问题讨论】:

  • 如果console.log(data);onSuccess 开头,你会看到什么?
  • 未捕获的类型错误:无法读取 Object.onSuccess [as success] (POI_HOME.html:35) at c (jquery.min.js:4) at Object.fireWith [ as resolveWith] (jquery.min.js:4) at k (jquery.min.js:6) at XMLHttpRequest.r (jquery.min.js:6) onSuccess @ POI_HOME.html:35 c @ jquery.min.js :4 fireWith @jquery.min.js:4 k @ jquery.min.js:6 r @ jquery.min.js:6
  • 当我知道 SQL 查询工作正常时,基本上没有数据。
  • 我可以看到您尚未解码从 Web 服务返回的 JSON。您需要在 jQuery Ajax 调用中指定 dataType: "json"。或者您需要在 onSuccess 函数的第一行执行类似 var jsonData = JSON.parse(data) 的操作。
  • 其他查询的运行取决于用户在前端输入的内容,但是如果没有返回结果也会出现此错误。所以它在一定程度上有效,但对于第一个查询(已发布)和没有返回结果的查询,似乎我的 Web 服务正在编码和空 JSON 数组?

标签: javascript php mysql json ajax


【解决方案1】:

理想情况下,如果没有结果,您应该传回空结果,并让 Javascript 决定要做什么(向用户显示一条友好的消息)。这个我没测试过,仅供参考,请注意。

PHP

if ($type == "any" && !isset($region)) /* Search DB for all types of POI for all regions*/
{
        $statement = $conn->prepare("SELECT * FROM pointsofinterest;");
        $statement->execute();
        $results = $statement->fetchAll();
        if (count($results)!=0){
            echo json_encode($results);
        } else {
            header("HTTP/1.1 204 No Content");
        }
}

JAVASCRIPT

您可能希望单独处理 204 响应:How to handle a 204 response in jquery ajax?。下面的代码假定您可能会收到一个空的 JSON 响应。

function onSuccess(data,status,xmlHTTP)
{
    if (data.length==0) {
       alert("Friendly user message"); 
       return;
    }
    var html = "<table><th>name</th><th>type</th><th>country</th><th>region</th>";
    for(var i=0; i<data.length; i++)
    {
    html = html + '<tr><td>' + data[i].name + '</td>' + '<td>' + data[i].type + '</td>' + '<td>' + data[i].country + '</td>' + '<td>' + data[i].region + '</td></tr>';  
    }
    html = html + '</table>';
    $('#results').html(html);
    console.log(data);
    console.log(status);
}

【讨论】:

  • 感谢您的回复,非常感谢。为了向用户显示消息,我将使用标题信息 Guillermo。因为它是我正在创建的网络服务,所以客户端将使用标题信息来显示他们自己的自定义消息。我尝试了您发布的代码,但没有成功,可能是由于缺少说明数组?
  • 这个想法是即使没有结果也总是返回有效的 JSON。即使没有行,fetchAll() 也应该始终返回一个数组:php.net/manual/en/pdostatement.fetchall.php。如果要发送 204 响应,可以先检查长度。我会修改我的答案。当然,您必须在 Ajax 调用中处理 204 响应。
  • 我了解吉列尔莫。似乎检查 $region 变量是否未设置导致没有结果,我对其进行了编辑以检查其是否为空白( $region ==""),我现在得到了结果。我为我的网络服务尝试了你的建议(PHP),我的所有结果都以未定义的形式返回。我现在面临的挑战是发送一个空白的有效 JSON 响应以停止在没有返回结果时出现的“无法读取长度”控制台错误。
  • 感谢大家抽出时间来帮助我!非常感谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-12-04
  • 2013-07-23
  • 1970-01-01
  • 1970-01-01
  • 2012-10-13
  • 2017-07-31
  • 1970-01-01
相关资源
最近更新 更多