CODEWITHSUNDEEP
phpjquerymysqlajax
AllThisOnAnACER
AllThisOnAnACER

Reputation: 331

$ajax call producing 'undefined' result

I cannot get the data to show up in the page, though it appears in console.log.

Here is my query on api.php, the pages are in the same folder.

$Sub = $_GET['id'];
$stmt = $conn->prepare("SELECT id, name FROM variables WHERE id=:id");
$stmt->bindParam(':id', $Sub, PDO::PARAM_STR);
try {$stmt->execute();} catch(PDOException $e){ echo errorHandle($e);}
$rs2 = $stmt->fetch(PDO::FETCH_ASSOC);
echo json_encode($rs2);

It is working fine and produces

{"id":"1","name":"James"} on api.php

Here is the .js and body

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
</head>
<body>
<p><div id="shoot">shoot</div>

<div id="output"></div>
   < script >
   $(document).ready(function() {
   $("#shoot").click(function() 
    {
    $.ajax({
      type: "GET",
      url: 'api.php?id=1',          
      data: "?id=1",      
      dataType: 'json',      
      success: function(data)     
 {
       var id = data[0]; 
      var vname = data[1];
      $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); 
        console.log(data);
    } 
    });
  }); 
 });
  </script>         
        </body>
        </html>

I'm getting back

id: undefined name: undefined

I've tried $ajax and any number of other changes but nothing is showing up in the page. Help would be appreciated

Upvotes: 0

Views: 734

Answers (2)

Qirel
Qirel

Reputation: 26450

A couple of things to note

  1. You're statically setting the ID when you set the URL-parameter, yet passing it as an argument in data as well. You should reference the file in the url parameter, and pass all relevant values in the data parameter.
  2. The data-parameter has an invalid ? in front.
  3. Actual issue: You get an associative JSON object returned, not an array, so you'll need to access it as such, with data.id instead of data[0].

The AJAX-call should look something like this.

$.ajax({
      type: "GET",
      url: 'api.php',          
      data: {id:1},      
      dataType: 'json',      
      success: function(data) {
          var id = data.id; 
          var vname = data.name;
          $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); 
          console.log(data);
     } 
});

This assumes that you have set the PHP header to return it as JSON, with 

header("Content-Type: application/json");

when you use echo json_encode(..).

The values passed in the data parameter can be formatted in several ways, I've chosen a {id:1} in this example, but "id=1" would be valid as well.

Upvotes: 2

Ravi Gehlot
Ravi Gehlot

Reputation: 1139

On your $.ajax call do not pass the data: "?id=1". By doing that, you are hard-coding the response. So remove that line. That should fix the response coming back to AJAX.

Also, on success: function(data), the data you get back needs to be accessed in this manner:

data.id and data.vname.

Upvotes: 0

Related Questions