Javascript 解析json&；来自ajax响应的html数据

我正在向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"}

jQuery.ajax({
键入：“获取”，
url:“http://testing.local/index.php",
数据类型：“html”，
成功：功能（响应）{
//在这里解析响应。。。
}
});

响应：

<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"}

数据清单
数据1
值1
数据2
价值2
数据3
价值3
{“状态”：“成功”，“消息”：“成功接收数据”}

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

---

因此，我想从json数据中警告成功或失败消息，并使用jQuery或javascript在div中设置id为“htmldata”的html代码。

使您的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));
*/

---

就这样

这会让你接近你想要的

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作为字符串包含在响应头中。

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

这个json字符串是否总是在响应的最后一行？是的，它总是在最后一行，但json数据可能不同。var responsetext=response.split（“\n”）；警报（responsetext[responsetext.length-1]）；试试这个，或者你可以使用javascripts的最后一个索引。我建议只使用一个，即

JSON

，只需在其中添加另一个：

data:“其余的标记html”

html代码是通过查看文件生成的