从 ajax 响应中解析 json 和 html 数据答案

【问题标题】：Parse json & html data from ajax response从 ajax 响应中解析 json 和 html 数据
【发布时间】：2014-09-10 07:34:57
【问题描述】：

我正在向 url 发送 ajax 请求并得到以下响应：

Ajax 请求：

<div id="htmldata"></div>
<script type="text/javascript">
    jQuery.ajax({
        type: "GET",
        url: "http://testing.local/index.php",
        dataType: "html",
        success: function(response) {
            // Parse response here ...
        }
    });
</script>

回应：

<div class="dataset">
    <h1 class="title">List of Data</h1>                             
    <table width="100%" align="center" class="datatable" >
        <tr>
            <td class="dataField" ><label>Data 1</label></td>
            <td class="dataValue">Value 1</td>
        </tr>
        <tr>
            <td class="dataField" ><label>Data 2</label></td>
            <td class="dataValue">Value 2</td>
        </tr>
        <tr>
            <td class="dataField" ><label>Data 3</label></td>
            <td class="dataValue">Value 3</td>
        </tr>
    </table>
</div>

{"status":"success", "message":"Received data successfully"}

在 ajax 响应中，有两种类型的数据，json 和 html。

所以我想提醒来自 json 数据的成功或失败消息，并使用 jQuery 或 javascript 在 id 为“htmldata”的 div 中设置 html 代码。

【问题讨论】：

这个json字符串总是在你回复的最后一行吗？
是的，它总是在最后一行，但 json 数据可能不同。
var responsetext = response.split("\n");警报（响应文本 [responsetext.length -1]）；试试这个或者你可以使用 javascripts 的最后一个索引。
我建议只坚持一个，即JSON，只需在里面添加另一个：data: "rest of markup html"
通过视图文件生成html代码

标签： javascript php jquery

【解决方案1】：

让你的json对象像这样：

$form = '<div class="dataset">
         <h1 class="title">List of Data</h1>                             
         <table width="100%" align="center" class="datatable" >
    <tr>
        <td class="dataField" ><label>Data 1</label></td>
        <td class="dataValue">Value 1</td>
    </tr>
    <tr>
        <td class="dataField" ><label>Data 2</label></td>
        <td class="dataValue">Value 2</td>
    </tr>
    <tr>
        <td class="dataField" ><label>Data 3</label></td>
        <td class="dataValue">Value 3</td>
    </tr>
</table>
</div>';

// Handle Success Message
echo json_encode(array( 'status'=>'success', 
                        'message'=>'Received data successfully', 
                        'html'=>$form));
// Handle Failure Message
/*echo json_encode(array( 'status'=>'fail', 
                        'message'=>'Something went wrong', 
                        'html'=>$form));
*/

在success 和fail 两种情况下，它都会返回表单，
现在转Javascript：

jQuery.ajax({
    type: "GET",
    url: "http://testing.local/index.php",
    dataType: "json",
    success: function(response) {
        console.log(response.status);
        console.log(response.message);
        console.log(response.html);
    }
});

就是这样

【讨论】：

【解决方案2】：

在解析部分，您可以通过尝试解析响应并获取结果来测试响应是否为 json。如果响应不是 json，则打印出 html 响应。我建议您制作一个特定元素来托管来自您的 AJAX 调用的动态 html。

【讨论】：

【解决方案3】：

这应该让你接近你想要的

var respJson;
jQuery.ajax({
  type: "GET",
  url : "http://testing.local/index.php"
  dataType : "html",
  dataFilter : function(data, type) {
    var dara = split(data, "\n");
    respJson = jQuery.parseJSON(dara.pop());
    return join(dara);
  },
  success: function(response) {
    // respJson contains your json
    // response is your html
  }
})

或者您可以简单地将 json 作为字符串包含在响应标头中。

【讨论】：