带有json响应的jQuery ajax请求，如何？

Posted 2023-02-24

【中文标题】带有json响应的jQuery ajax请求，如何？

【英文标题】：jQuery ajax request with json response, how to?

【发布时间】：2012-02-24 07:11:58

【问题描述】：

我正在发送一个带有两个 post 值的 ajax 请求，第一个是“action”，它定义了我的 php 脚本必须解析的操作，另一个是“id”，它是它必须解析脚本的用户的 id为。

服务器在 array() 中返回 6 个值，然后使用 PHP 函数将其编码为 JSON：json_encode();

我的一些响应是 html，但是当我将其编码为 JSON 时，它会转义 "/"，因此它变成 "\/" 如何禁用它？

此外，当我在收到服务器响应时不知道如何在 jQuery 中显示它时，我只是认为将其全部放入 div 只会显示我请求的数字和 HTML 代码，但它会显示数组因为它是用 PHP 编码的。

PHP

$response = array();
$response[] = "<a href=''>link</a>";
$response[] = 1;
echo json_encode($response);

jQuery：

$.ajax(
    type: "POST",
    dataType: "json",
    url: "main.php",
    data: "action=loadall&id=" + id,
    complete: function(data) 
        $('#main').html(data.responseText);
    
);

如何将其转换为有效的 JSON？

【问题讨论】：

您能否转储您的 JSON 响应以更好地了解问题？不确定您所说的“/”是什么意思，所以它变成了“/”

你试过api.jquery.com/jQuery.getJSON 吗？

对不起，我做了一个反斜杠，但它有点消失了 :) 但是每个普通斜杠在它之前都有一个反斜杠“反斜杠”+“普通斜杠”ka_lin：我看了它，但我不明白，并且如果我这样做了，我将如何在请求中发送一些帖子数据？

【参考方案1】：

首先，如果您将 PHP 的标头设置为服务 JSON，这将有所帮助：

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

其次，这将有助于调整您的 ajax 调用：

$.ajax(
    url: "main.php",
    type: "POST",
    dataType: "json",
    data: "action": "loadall", "id": id,
    success: function(data)
        console.log(data);
    ,
    error: function(error)
         console.log("Error:");
         console.log(error);
    
);

如果成功，您收到的响应应该被提取为真正的 JSON，并且应该将一个对象记录到控制台。

注意：如果你想拾取纯html，你可能要考虑使用另一种方法来JSON，但我个人建议使用JSON并使用模板将其渲染成html（例如Handlebars js）。

【讨论】：

我尝试了您的示例，在我的萤火虫控制台中，我得到了响应：在属性列表“成功：函数（数据）”之后缺少 是的，您在设置数据后错过了昏迷。但现在它给了我一个在 firebug 中用 json 编码的响应

我有一个语法错误 - “成功”应该是“成功”，我错过了一个逗号。您现在应该能够浏览您的响应并将其部分输出到 DOM 中。

是的，你如何在 jquery 中将数组拆分为 6 位并以 6 个不同的元素输出？

这取决于您的 JSON 的结构，如果您链​​接示例，我可以提供帮助。

您需要 PHP 将数组输出到 JSON 而不是 html 中。

【参考方案2】：

由于您将标记创建为字符串，因此您无需将其转换为 json。只需发送它，因为它使用implode 方法组合所有数组元素。试试这个。

PHP 变化

$response = array();
$response[] = "<a href=''>link</a>";
$response[] = 1;
echo implode("", $response);//<-----Combine array items into single string

JS（把dataType从json改成html或者不设置，jQuery会搞定的）

$.ajax(
   type: "POST", 
   dataType: "html", 
   url: "main.php", 
   data: "action=loadall&id=" + id,
   success: function(response)
      $('#main').html(response);
   
);

【讨论】：

@Flaashing - 你试过了吗？

不，因为我希望这 6 个值中的每一个都显示在 6 个不同的元素中:)

【参考方案3】：

你需要调用

$.parseJSON();

例如：

...
success: function(data)
       var json = $.parseJSON(data); // create an object with the key of the array
       alert(json.html); // where html is the key of array that you want, $response['html'] = "<a>something..</a>";
    ,
    error: function(data)
       var json = $.parseJSON(data);
       alert(json.error);
     ...

看到这个 http://api.jquery.com/jQuery.parseJSON/

如果你仍然有斜线的问题： 搜索security.magicquotes.disabling.php 要么： function.stripslashes.php

注意：

这里的答案适用于那些尝试使用$.ajax 并将dataType 属性设置为json 的人，甚至得到了错误的响应类型。在服务器中定义header('Content-type: application/json'); 可能会解决问题，但如果您返回text/html 或任何其他类型，$.ajax 方法应将其转换为json。我使用旧版本的 jQuery 进行了测试，并且只有在 1.4.4 版本之后，$.ajax 才会强制将任何内容类型转换为 dataType。因此，如果您遇到此问题，请尝试更新您的 jQuery 版本。

【讨论】：

在参数列表“alert(data.0);”之后返回错误：missing )

是的，这是一个例子。您必须使用可以转换为对象的键来定义数组，因为数字可以。比如 $response['html'] = "something";比您使用 parseJSON json.html 调用它（如上面的示例）。

请改正使用 alert(json.html);而不是 alert(data.html);

当dataType: "json" 用于ajax 调用时，您不需要$.parseJSON；来自 jQuery 文档："(dataType:)"json": 将响应评估为 JSON 并返回一个 javascript 对象。"

是的@northkildonan，你是对的，事实上@sgb 的答案是正确的答案，但是如果你查看jquery 代码，当你通过dataType 时，它确实将响应转换为特定类型，但 Flaashing 已经完成了，并且没有转换。我不知道为什么会发生这种情况，但是我曾经遇到过同样的问题，唯一的方法是解析响应。

【参考方案4】：

使用发送和接收带有绑定数据的操作码连接您的 javascript 客户端控制器和 php 服务器端控制器。因此，您的 php 代码可以作为响应功能增量发送给 js 接收者/侦听器

见https://github.com/ArtNazarov/LazyJs

对不起我的英语不好

【参考方案5】：

试试这个代码。您不需要 parse 函数，因为您的数据类型是 JSON，所以它返回 JSON 对象。

$.ajax(
    url : base_url+"Login/submit",
    type: "POST",
    dataType: "json",
    data : 
        'username': username,
        'password': password
    ,
    success: function(data)
    
        alert(data.status);
    
);