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

Question

I'm sending ajax request to url and getting following response:

Ajax Request:

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

Response:

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

In ajax response, there is both types of data, json and html.

So I want to alert success or failer message from json data and set html code in div with id "htmldata" using jQuery or javascript.

Answer 1

Make you json object like this:

$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));
*/

In both success and fail situation its return you the form,
Now Javascript Turn:

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);
    }
});

that's it

Answer 2

This should get you close to what you want

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

Or you could simply include the json as a string in the response header.

Answer 3

In the parsing part, you could test if the response is json via trying to parse it and get results. If the response is not json, then print out the html response. I would suggest you to make a specific element for hosting the dynamic html, which comes from your AJAX call.