通过ajax返回大量的html（带有几个变量）？

Question

I have an ajax function search for keywords in a big database. The php being called simply says "no" if there's nothing, but if there are found records, it goes ahead and creates all of the HTML and returns the html, so that AJAX only needs to put the returned text into the html of a div. My problem is that I'd like to pass along a couple of variables, like the number of records found, etc.

So if I tried to put it in a statement that javascript could eval, I'm afraid that not only is all of the html potentially big enough to cause some sort of variable problems, but it also has a lot of single and double quotes, etc, that could unexpectedly end the variable before it's supposed to. See the following

// (I know I don't have a single quote after data and that will break it. This is just an example
echo "{ status: 'success', total: '".count($relevance)."' data: ";
foreach ($relevance as $re) {        
    // tons of html is printed here
}
echo " }";

So the question is, how do I most effectively send back a whole gang of html code, along with some variables that can be easily eval'ed by JS?

Answer 1

Use json_encode This will eliminate any errors you might have in trying to create your own json.

$returnArray = array(
    'status'=>'success',
    'total' => count($relevance),
    'data' => ''
);

foreach ($relevance as $re) {        
    $returnArray['data'] .= $re; // + all long html code
}

echo json_encode($returnArray);

Answer 2

You can encode the data as JSON and then put it in a <script> block that's got a non-JavaScript type. Give the script a class too so your code can look for it easily. You can then get the ".innerHTML" of the <script> element and decode the JSON. Then just add the <script> to the rest of the HTML you're returning.

edit No use @Neal's answer instead; it's a less goofy idea. I've done what I've described but usually that's because for some other (framework) reason it's not easy (or just inconvenient) to get directly at the response data. Also, I generally generate pages via JSP, so it's much easier to drop JSON into a page than to get the page contents into Java.

To elaborate, a <script> block like this:

<script type='text/json' class='some-data-for-you'>
  { "hello": "world" }
</script>

will be ignored by the browser because the "type" won't be recognized as code. Then your JavaScript code can just look for <script> elements with class "some-data-for-you" in the returned content and then parse the ".innerHTML" with a JSON parser.