Jquery AJAX not taking in JSON from the php file

Question

I have been trying to fetch data from the server using jquery .ajax function. However it's not working whenever I give data Type as JSON.

It works fine when I don't define dataType, but I need dataType to be JSON..

Below are the codes.

Practice.php

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Practice</title>

        <?php
          require("db.php");
         ?>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      </head>
      <body>
        <div>Why doesn't it work..</div>
        <div id="demo"></div>
        <button type="button" id="button" name="button">button</button>
      </body>
      <script>
      //Load table
      $('#button').on('click', function(){
        // var please = 1;
        $.ajax({
          type: 'POST',
          url: 'AJAX.php',
          // data: {id: please},
          dataType: 'json',
          success: function(data) {
            $('#demo').text('Worked!');
            console.log(data);
          },
          error: function(error) {
            $('#demo').text('Error : ' + error);
            console.log(error);
          }
        });
      });
      </script>

    </html>

AJAX.php

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Ajax Practice</title>

        <?php
          require("db.php");
         ?>

      </head>
      <body>

      <?php
        if (isset($_POST["id"])) {
          $id = $_POST["id"];
        } else {
          $id = 1;
        }
        $stmt = $conn->prepare("SELECT * FROM projects WHERE id=$id");
        $stmt->execute();
        $all = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $all = json_encode($all);

        echo $all;

       ?>

      </body>

    </html>

And here is the result of the echo..

   [  
       {  
          "Project":"BPM",
          "Date":"2018-03-02 00:00:00",
          "Manager":"Someone",
          "Status":"2",
          "ID":"1",
          "Counter":null
       }
    ]

I'm pretty new to Jquery and web programming generally.. Please advise, your help is greatly appreciated.

ajax.php doesnt return json, it has html in it!

James
– James

2018-02-08 05:59:19 +00:00
Commented Feb 8, 2018 at 5:59 — James
– James, Commented Feb 8, 2018 at 5:59

Vlam · Accepted Answer · 2018-02-08 06:01:34Z

1

Remove all HTML from your AJAX.php then add the code below to the top of your AJAX.php

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

answered Feb 8, 2018 at 6:01

Vlam

1,7901 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TarangP · Accepted Answer · 2018-02-08 06:02:44Z

1

<?php
        require("db.php");
        if (isset($_POST["id"])) {
          $id = $_POST["id"];
        } else {
          $id = 1;
        }
        $stmt = $conn->prepare("SELECT * FROM projects WHERE id=$id");
        $stmt->execute();
        $all = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $all = json_encode($all);

        echo $all;

?>

Change Your Ajax code to This. Because here there is no need of html Content

You can use mysqli_real_escape_string

answered Feb 8, 2018 at 6:02

TarangP

2,7385 gold badges24 silver badges42 bronze badges

Comments

Eddie · Accepted Answer · 2018-02-08 06:03:18Z

0

since you specified dataType: 'json' your js is expecting json format. Right now, you are returning including the <head>, <beody> html tags.

On your AJAX.php

    <?php
    require("db.php");

    if (isset($_POST["id"])) {
      $id = $_POST["id"];
    } else {
      $id = 1;
    }
    $stmt = $conn->prepare("SELECT * FROM projects WHERE id=$id");
    $stmt->execute();
    $all = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $all = json_encode($all);

    echo $all;
   ?>

answered Feb 8, 2018 at 6:03

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

2 Comments

Peter Kim Over a year ago

lol... thanks.. I never thought that kind of problem to be in the way...... Now it's working perfectly....

Eddie Over a year ago

Happy to help :)

Carl Sare · Accepted Answer · 2018-02-08 06:03:55Z

0

You need to parse it in your AJAX. Try this...

$('#button').on('click', function(){
    // var please = 1;
    $.ajax({
      type: 'POST',
      url: 'AJAX.php',
      // data: {id: please},
      dataType: 'json',
      success: function(data) {
        var response = JSON.parse(data);
        $('#demo').text('Worked!');
        console.log(response);
      },
      error: function(error) {
        $('#demo').text('Error : ' + error);
        console.log(error);
      }
    });
  });

answered Feb 8, 2018 at 6:03

Carl Sare

1912 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery AJAX not taking in JSON from the php file

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related