CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
Peter Kim
Peter Kim

Reputation: 13

Jquery AJAX not taking in JSON from the php file

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.

Upvotes: 1

Views: 190

Answers (4)

Carl Sare
Carl Sare

Reputation: 191

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);
      }
    });
  });

Upvotes: 0

Eddie
Eddie

Reputation: 26844

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;
   ?>

Upvotes: 0

TarangP
TarangP

Reputation: 2738

<?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

Upvotes: 1

Vlam
Vlam

Reputation: 1798

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

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

Upvotes: 1

Related Questions