JSON encoded value not returned properly - php

Question

I'm trying to call a file from my server and return an HTML form. I asked a question here to get started but now I have another problem.
The textbox and submit button display, but since the data is JSON encoded and returned via AJAX to a DIV I'm not quite sure how to approach it.
Right now here's the result. Where I have "textbox and submit button" those elements are actually there. The other text appears around it.
testing
{"formHTML":"
"textbox here" " submit button here"<\/form>"}
Here's the code that would be on another server which calls to mine. This is the page that does the displaying
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<?php
echo "testing";
?>
<script>
$.ajax({
type: 'GET',
url: 'form_deliverer.php',
data: "true",
success: function(response) { // on success..
$('#yourdiv').html(response); // update the DIV
}
})
</script>
<div id = "yourdiv">
//form is displayed here
</div>
Here is the page that gets called, form_deliverer.php
<?
$o = new stdClass();
$o->formHTML = "<form method='post'><input type='textbox' name='text'/><input type='submit' name='submit_text'/></form>";
echo json_encode($o);
?>
Because AJAX automatically updates the div, how can I decode the data? Should I even do that?
For reference, this displays the form properly without the extra text. However, since I'll be calling from another server and have to deal with same domain issues, I'll have to use JSONP
<?
if(isset($_GET['true'])){
echo "
<form method='post'>
<input type='textbox' name='text'/>
<input type='submit' name='submit_text'/>
</form>
";
}
?>

Answer 1

You won't need to decode the data, though you will have to treat the response as an object. Because you json_encode()ed an stdClass, your ajax call will basically get something like this in return:
{"formHTML": "<form method='post'><input type='textbox' name='text'/><input type='submit' name='submit_text'/></form>"}
To access the string, you could simply write
$("#yourdiv").html(response.formHTML);
However, if you are only passing in the string, you could simply json_encode() the string instead of creating an object and then encoding that. That way, you can use response directly in your javascript.
form_deliverer.php
<?
echo json_encode("<form method='post'><input type='textbox' name='text'/><input type='submit' name='submit_text'/></form>");
?>
javascript
$.ajax({
type: 'GET',
url: 'form_deliverer.php',
data: "true",
success: function(response) { // on success..
$('#yourdiv').html(response); // update the DIV
}
})