如何在JS中使用ajax请求的结果？

Question

I have a query which returns 2 rows. Here is my PHP code:

$arr = array();

$stmt = $dbh_conn->prepare("SELECT id,name FROM mytable WHERE id <= 2");
$stmt->execute();
$result = $stmt->fetchAll();
/*Array
  (
      [0] => Array
          (
              [id] => 1
              [name] => pear
          )

      [1] => Array
          (
              [id] => 2
              [name] => watermelon
          )

  ) */

$arr["output"] = $result;

header('Content-Type: application/json');   
echo json_encode($arr);
exit(); 

And here is my JS code:

success: function(arr) {
    $(".myclass").html(arr.output.0.name);
}

And it throws this:

Uncaught SyntaxError: missing ) after argument list

When I remove .0.name , it throws this:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Anyway, how can I show the result of a ajax request when there is multiple rows selected?

All I want to make is a HTML table of the result like this:

<tr>
    <td>1</td>
    <td>pear</td>
</tr>
<tr>
    <td>2</td>
    <td>watermelon</td>
</tr>

And then push it into $('.myclass') element.

Answer 1

Use JSON.parse to parse the string ( data ) back into an array.

success: function(data) {
    var arr = JSON.parse(data);
    $(".myclass").text(arr.output[0].name);
}

And use subscripts for arrays. And if you want to set the text of the .myclass as mentioned in a comment use .text instead of .html .

Answer 2

If your data is returned as json, you need to access the array of objects, change

$(".myclass").html(arr.output.0.name);

to

$(".myclass").text(arr.output[0].name);