CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
Abilash Erikson
Abilash Erikson

Reputation: 351

JSON encode is not working properly in ajax function

I built an event to change product name that mix up with ajax and json encode 

<div class="new-product-name"></div>
 <div class="new-product-num"></div>

Then the script is 

$(function(){
  $.ajax({
    method: "POST",
    url: "fetch-product.php",
    data: {keyword: 12}
  }).done(function(msg){
    $(".new-product-name").html(msg);

    $.getJSON("fetch-product.php", function(data) {
      $(".new-product-name").html(data.a);
      $(".new-product-num").html(data.b);         
    });
  });
});

in fetch-product.php

$query = "SELECT * FROM `product_details` WHERE id='". $_POST['keyword']."'";
$result = $conn->query($query);

if ($result->num_rows > 0) {
  $row = $result->fetch_assoc(); 
  $name=$row["p_name"];
  $num=$row["num"];
}

echo json_encode(array("a" =>  $name, $num));

Here product details is fetching correctly , even in $(".new-product-name").html(msg); it showing '{"a":"Product1", "b":"22"}', it is entering in to $.getJSON("fetch-product.php", function(data) { }

But data.a , data.b showing null.

why is data.a , data.b null ?I am spending too much time . Please help to solve this error .

Upvotes: 1

Views: 2317

Answers (4)

RiggsFolly
RiggsFolly

Reputation: 94642

I see no reason to make 2 calls to the PHP script.

If you add the dataType:json parameter jQuery will expect a JSONString back from the PHP and msg will be automatically converted to a javascript object.

$(function(){
    $.ajax({
        method: "POST",
        dataType: "json",         // new param
        url: "fetch-product.php",
        data: {keyword: 12}
    })
    .done(function(msg){
        if ( msg.status == 1 ) {
            $(".new-product-name").html(msg.a);
            $(".new-product-num").html(msg.b); 
        } else {
             $(".new-product-name").html(msg.info);
        }
    });
});

The other issue with your call to $.getJSON("fetch-product.php",..... was that this would issue a GET request, and therefore fill the $_GET array with any parameters. Your PHP code is not looking for parameters passed in the $_GET array!

Your PHP code as it was, was vulnerable to SQL Injection, so I have amended it to use Parameterised & Prepared statements.

You also need to consider the possibility that nothing is found by your query and return something to let the javascript know about that.

$query = "SELECT * FROM `product_details` WHERE id=?";
$stmt = $conn->prepare($query);
$stmt->bind_param('i', $_POST['keyword']);
$result = $stmt->execute();

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc(); 
    echo json_encode(array( 'status'=> 1,
                            'a'=>$row["p_name"], 
                            'b'=>$row["num"]);
} else {
    echo json_encode(array('status'=>0,
                            'info'=>'No data found');
}

Upvotes: 5

Sabith
Sabith

Reputation: 1656

If You want to make two php calls , then try This:

fetch-product.php

<?php
    if($_SERVER['REQUEST_METHOD'] == 'GET' ){
    $keyword = $_GET['keyword'];
}else{
    $keyword = $_POST['keyword'];
}

$query = "SELECT * FROM `product_details` WHERE id='". $keyword."'";
$result = $conn->query($query);

if ($result->num_rows > 0) {
 $row = $result->fetch_assoc(); 
 $name=$row["p_name"];
 $num=$row["num"];
}

echo json_encode(array("a" =>  $name, $num));

?>

Then the Script is 

$(function(){ 
var data = {keyword: 12};

$.ajax({
 method: "POST",
 url: "fetch-product.php",
 data: data
}).done(function(msg){
$(".new-product-name").html(msg);

 $.getJSON("fetch-product.php",{keyword: 12}).done(function(data1) {
   $(".new-product-name").html(data1.a);    
  });
  });
});

Upvotes: 1

ADyson
ADyson

Reputation: 61829

$.ajax({
    method: "POST",
    url: "fetch-product.php",
    data: {keyword: 12}
  }).done(function(msg){
    $(".new-product-name").html(msg);

makes a POST to fetch-product and writes the value of msg into the product name element. Except that it should probably be msg.a since your code returns an object with the data inside the a property. You also need to set the dataType:json option so that jQuery knows the returned value from the server is an object and not a string.

However, you then make another request to the same URL, but using a GET request and without passing any parameters. Since your PHP tries to read values from POST requests only, this causes your query to return nothing, and thus your output of $name is empty. You then overwrite your product name element with this empty value.

Why you are making this second request to the same resource, but with the wrong settings, is a complete mystery. It is totally unnecessary. This code should do what you need in a single request:

$(function(){
  $.ajax({
    method: "POST",
    url: "fetch-product.php",
    data: {keyword: 12},
    dataType: "json"
  }).done(function(msg){
    $(".new-product-name").html(msg.a);
    $(".new-product-num").html(msg.b); 
  });
});

P.S. Your SQL is incredibly vulnerable to SQL Injection attacks. You should switch to using parameterised queries and prepared statements. Otherwise someone could send a malicious value in the "keyword" parameter and steal, destroy or otherwise corrupt your data. See http://bobby-tables.com/ for a humorous but very clear example of this sort of problem. Both the PDO and mysqli libraries for PHP provide easy ways to create prepared statements, and there are hundreds of examples of the syntax available online for you to follow.

Upvotes: 4

Tobias F.
Tobias F.

Reputation: 1048

As @Sirko already said, you are sending two requests:

$(function(){
  $.ajax({ // First request, as planned
    method: "POST",
    url: "fetch-product.php",
    data: {keyword: 12}
  }).done(function(msg){
    $(".new-product-name").html(msg);

    // This will send an additional GET request to fetch-product.php without any parameters
    $.getJSON("fetch-product.php", function(data) { 
      $(".new-product-name").html(data.a);    
    });
  });
});

Remove the second request or replace the first with the second, if GET method is applicable it should work fine. Because the second request returns null the html of everything with the class .new-product-name will be empty ("").

Upvotes: 2

Related Questions