javascript - Parse json & html data from ajax response - Stack Overflow

admin管理员组

文章数量:1333630

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: "/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.

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.

• javascript
• php
• jquery

Share Improve this question Follow asked Sep 10, 2014 at 7:34 yogesh suhagiyayogesh suhagiya 49822 gold badges66 silver badges2020 bronze badges 10

• Is this json string always on the last line of your response? – Stijn Bernards Commented Sep 10, 2014 at 7:37
• yes it always in last line, but json data may be different. – yogesh suhagiya Commented Sep 10, 2014 at 7:37
• var responsetext = response.split("\n"); alert(responsetext[responsetext.length -1]); Try this Or you could use javascripts last index of. – Stijn Bernards Commented Sep 10, 2014 at 7:39
• i suggest just stick to one, which is JSON, just add another inside: data: "rest of markup html" – Kevin Commented Sep 10, 2014 at 7:40
• 1 html code is generated through view file – yogesh suhagiya Commented Sep 10, 2014 at 7:43

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

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

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 es from your AJAX call.

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.

本文标签： javascriptParse json amp html data from ajax responseStack Overflow