What is a cleaner / better way of parsing data received by an ajax success function?

Question

I am using an ajax function to receive data. Based on that data, if results are not found I receive a string "No matches found" with some html formatting. If there are results, data is formatted into a table and a "Div" section underneath this section is hidden.

Now the issue I am having is, when I find no results, i do not want this "Div" table to disappear.But to check if there are no results, I would have to compare the whole string received by the searchCustomer.php (which is very large).

Is there an easier way of doing this?

My ajax call:

$('#search').click(function(e){
        $.ajax({
            type : 'GET',
            url : 'searchCustomer.php',
            dataType :'html',
            data:{
                lastName : $('#search_LN').val(),
                firstName : $('#search_FN').val(),
                phone : $('#search_PN').val()
            },
            success : function(data){
                if (data.error == true){
                    alert("there was an error in the post layer");
                } else {
                    $('#searchResults').html(data);



                if (data.text == '<br><font color='red'>No matches found</font>'){
                }else{
                var ele = document.getElementById("NewCustomerDiv");
                ele.style.display = "none";
                }
            }
        }
    });
    return false;
});

Running fire-bug, The actual data received from searchCustomer.php is:

<style type="text/css">
a.resultBookButton {
    color: black;
    padding: 1px;
    border: 2px outset lightgrey;

    background: #008800;
    /* Mozilla: */
    background: -moz-linear-gradient(top, lightgrey, #FFFFFF);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(lightgrey), to(#FFFFFF));

    text-decoration: none;
}

a:active {
    border-style: inset;
}
</style>

<br><font color='red'>No matches found</font>

I just want to check for "No matches found" or if there is a better way of finding no results.

Answer 1

Yes, return JSON instead. You can structure the response to be:

{
  count: 0,
  content: "your html here"
}

You can then check the count through data.count . Your server will need to set this based on the number of results found.

You will want to set the dataType property in the ajax call to JSON .

Answer 2

I disagree with Brad, converting to JSON would be a pain because all your HTML which uses quotes all the time would have to have those quotes escaped in order to work in a JSON string, which can present an annoyance at best and accidentally trigger errors for invalid JSON at worst.

The ideal solution is changing what those pages return. Return the full HTML if items found, return "0" or "" if nothing is found, and then check for those returns.

If you can't change what is returned from the AJAX call, perhaps just do an (returnedData.indexOf("

Easy peasy.

EDIT:

$.ajax({
      ... other setting ...
        success : function(data){
           (data.indexOf('<table') == -1){
                //there was a table in the returned data
           } else {
                // ...
           }
        }
      });

Answer 3

AJAX responses should contain raw data that is in an easily parse-able format, such as JSON or XML. Upon receiving the response, the AJAX success handler should then parse the response and generate the necessary HTML to display. searchCustomer.php should not be generating the HTML...your success handler should.

If designed in this way, it gives you the flexibility to display the data however you want, so you can re-use this AJAX function anywhere in your website (or even make it publically available for others on the Internet to use).

JSON:

{
  results: [
    "result1",
    "result2"
  ]
}

XML:

<results>
  <result>result1</result>
  <result>result2</result>
</results>