Question

This is my php code saved as db2.php

<?php

      mysql_connect("mysql15.000webhost.com","a3189966_root","");

      mysql_select_db("a3189966_pd");
      $firstName = $_GET[firstName];
      echo $firstName;
      $q=mysql_query("SELECT * FROM people where first='$firstName'");

      while($e=mysql_fetch_assoc($q))
              $output[]=$e;

            $json = json_encode($output);
            echo($json);

    mysql_close();

?>

This is my html code with jquery and json saved as index2.html

    $("#myForm").submit(function(){
                    var postData = $(this).serialize();
                    $.ajax({
                        type: "GET",
                        dataType: "json",
                        data: $("#myForm").serialize(),
                        url: "db2.php",
                        success: function(data){
                            alert("processing now" + data);
                                  $.each(data,function(i,item){
                                                          alert("processing each data now");
                                      $('<li></li>').html(item.first + " " + item.last).appendTo('#data');
                                  });
                        },
                        error: function(data){alert("failed"+data);}
                    });
                return false;
                });

    <form id="myForm" method="GET" action="">
    <input type="textbox" name="firstName" id="firstName">
    <input type="submit" name="myButton" value="submit">
</form>
<ul id="data">
</ul>

After I have executed the html code below, it only prompt out the error.
I have checked for few hours, and I can’t see any error for this code to be executed correctly.
This is the json object return from the php

[{"id":"1","first":"wen","last":"hao","age":"123"}]

Answer 1

The error callback for the ajax call can take three arguments. The second and third arguments should give you a better idea of what’s going wrong.

From the jQuery ajax documentation:

Possible values for the second argument (besides null) are
“timeout”, “error”, “abort”, and “parsererror”. When an HTTP error
occurs, errorThrown receives the textual portion of the HTTP status,
such as “Not Found” or “Internal Server Error.”

So try something like this for your ajax call:

$.ajax({
    type: "GET",
    dataType: "json",
    data: $("#myForm").serialize(),
    url: "db2.php",
    success: function(data){
        alert("processing now" + data);
        $.each(data,function(i,item){
            alert("processing each data now");
             $('<li></li>').html(item.first + " " + item.last).appendTo('#data');
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert(textStatus);
        if(errorThrown) {
            alert(errorThrown);
        }
    }
});