提取 Json 响应答案

【问题标题】：Extract Json response提取 Json 响应
【发布时间】：2023-08-17 16:23:01
【问题描述】：

我正在尝试提取从 php 文件发送的 jquery 中的 Json 响应。这是 .js 代码：

    $.ajax({
 url: 'index.php?page=register', //This is the current doc
 type: 'POST',
 datatype: 'json',
 data: {'userCheck': username},
 success: function(data){
    // Check if username is available or not
 },
 error: function(){
    alert('Much wrong, such sad');
 }
});

这是来自 php 文件的响应：

    if($sth->fetchColumn()!=0){
        //$response = array("taken");
        $response = array("username"=>"taken");
        echo json_encode($response);
        //echo '{"username':'taken"}';
    }else{
        //$response = array("available");
        $response = array("username"=>"available");
        echo json_encode($response);
        //echo '{"username":"available"}';
    }

我已经尝试了两个文件中我能想到的所有组合，但似乎没有任何效果。这是对数据库中用户名的简单检查。如果我控制台记录从响应中获得的数据，我会得到：

    {"username":"available"}<!DOCTYPE html>
    // The rest of the page html

所以信息在那里，但我如何访问它？我尝试了几种在互联网上找到的语法，但到目前为止还没有运气。我似乎记得json响应只能包含有效的json，那么问题是html吗？由于我的应用程序的结构，我认为我无法避免这种情况，因此希望可以使用我目前的结构访问 json。

【问题讨论】：

你是在 echo 之前发送 header("Content-Type: application/json"); 吗？
@user2182349 为什么这很重要？他在 AJAX 调用中有dataType: "json"，所以它会忽略内容类型。
@MaDaHoPe: 回答 ;) 不要忘记退出();避免在 json 响应中包含 html 页面！
@Barmar - 设置 Content-Type 以反映所服务的内容是一种很好的做法。
@user2182349 也许吧，但如果你在客户端显式编码它不会有什么不同。

标签： javascript php jquery json ajax

【解决方案1】：

在你的 Ajax 中

编辑：

改变

datatype:"json",

不考虑参数名大小写，t必须为T

dataType:"json",

现在请重试

$.ajax
({
    url: 'index.php?page=register', //This is the current doc
    type: 'POST',
    dataType: 'json',
    data: {'userCheck': username},
    success: function(data)
    {
        // Check if username is available or not
        switch(data.username)
        {
            case "available":
                // do you want
                break;
            case "taken":
                // do you want
                break;
        }
    },
    error: function()
    {
        alert('Much wrong, such sad');
    }
});

在 PHP 中

就是这样，别忘了退出；避免在您的 json 响应中包含 html 页面！这是 }".... 之后的代码，它破坏了您的 json 输出并使其无法被 javascript 读取（更糟糕的是，它只会破坏您的 javascript！）

echo json_encode(["username"=> ($sth->fetchColumn()!=0) ? "taken":"available"]);
exit;

【讨论】：

感谢您的回答。完全错过出口；我现在得到了正确的 json，但是 switch 语句没有做任何事情。只是用一个简单的警报来测试它，但什么都没有发生：-/ 知道为什么吗？
console.log(data) 确实显示 {"username":"available"} 似乎不是字符串而是可访问的对象，并且不适用于某些已回答的代码（例如我的和 barmar ) ?可以截图吗？
我会试试的。我设法通过数据的 JSON.parse 解决了它，但是您的解决方案看起来更加优雅。非常感谢您的帮助！
并且更优化，它是为我认为您可以为访问此页面的未来初学者验证我的答案而设计的；）请更新您的代码以解释 JSON.parse() 方法。啊，欢迎您
实际上这对我不起作用。我仍然需要将响应解析为 JSON 对象，以便 JS 识别它。我像这样解析收到的数据： var newUser = JSON.parse(data);然后我可以使用 data 变量的语法访问 newUser 变量。我不太清楚为什么我需要这样做，但记得退出；避免文档的其余部分对于到达那里至关重要。只要我在自己的计算机上并可以访问我的本地主机，我就会更新我的工作代码。

【解决方案2】：

当您响应 AJAX 调用时，您应该只返回 JSON 响应，而不是页面的 HTML。添加：

exit();

在此代码之后，因此您不会在 JSON 之后显示 HTML。

在JS代码中，使用if (data.username == 'available')判断用户名是否可用。

您的代码中的另一个问题是您这里有一个错字：

datatype: 'json',

应该是dataType，加上大写的T。

你也可以放：

header("Content-type: application/json");

在回显脚本中的 JSON 之前，jQuery 会自动解析响应。

【讨论】：

感谢您的回答。出口解决了我问题的第一部分。但是， if (data.username == 'available') 什么都不做？？只是用一个简单的警报进行测试，但什么都没有……与@Mtroy 的 switch 语句相同，没有任何反应。我查看了旧项目（真的很旧）并且这种确切的语法正在工作，所以我很困惑为什么它在这种情况下不起作用......
{"用户名":"可用"}。所以json是有效的。
我看不出我的答案不起作用的任何原因。您只检查 success 函数中的响应，而不是代码中的其他地方，对吧？
我发现了问题。我需要将响应解析为一个对象。所以现在它正在工作，耶！非常感谢您的帮助！
不，你不需要解析任何东西，因为你使用了dataType:"json"，但是你只是通过忘记输入“t”而不是“T”来使这个参数的大小写无效跨度>

【解决方案3】：

您还可以在 jQuery ajax 调用 beforeSend 函数中设置请求标头，如下所示

beforeSend: function (xhr) {
                xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                xhr.setRequestHeader('Accept', 'application/json');
}

所以你严格地声明数据类型是 json

【讨论】：