Fetch json_encode from php in javascript

Question

try to pass json_encode variable in php to javascript. get an uncaught error in javascript. It works before, not changing anything, and now it doesnt work?!?

JSON variable is fine from PHP. Try to print_r in php, OK. Browser networks also OK.

variables I want to pass in PHP:

$response['id'] = $id;
$response['name'] = $name;
$response['note'] = $note;
$response['image'] = $image;

$response['bumbu'] = $bumbu;
$response['banyak'] = $banyak;

$response['masak'] = $masak;

$response['images'] = $images;

print_r($response);
json_encode($response);

my javascript:

$('#viewResep')
  .on('show.bs.modal', function (e) {
    var id = $(e.relatedTarget)
      .data('id');
    console.log('Requested : ' + id);

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        // document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
      }
    };

    xhttp.open('GET', 'process_post.php?view=' + id, true);
    xhttp.send();

    fetch('process_post.php?view=' + id)
      .then(text => JSON.parse(text))
      .then((data) => {

        r_Name = data.name;
        r_Note = data.note;
        r_Image = data.image;
        r_Bumbu = data.bumbu;
        r_Banyak = data.banyak;
        r_Masak = data.masak;
        r_Images = data.images;
      });
  });

I want to get all variables passed using json_encode in my javascript

You printed the `print_r` output, and discarded the `json_encode` result. Remove `print_r` and add `echo` to the next line. — Amadan, Oct 10 '19 at 05:35
remove the `print_r()` and just `echo json_encode($response);` — catcon, Oct 10 '19 at 05:35
You do not need both `XMLHttpRequest` and `fetch()` since they're both doing fundamentally the same thing. Just use `fetch(\`process_post.php?view=${encodeURIComponent(id)}\`).then(res => res.json()).then(data => { ... })` — Phil, Oct 10 '19 at 05:41
localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 — Abram, Oct 10 '19 at 05:45
Make sure your PHP script does not `echo`, `print` or otherwise output anything other than `echo json_encode($response);`. At the moment, it looks like it's printing some HTML. Please see the duplicates linked at the top of your question — Phil, Oct 10 '19 at 05:52
U are right Phil !! I accidently put print_r somewhere on top. now its working, but dont pass the array correctly to javascript. bah! — Abram, Oct 10 '19 at 06:01

Ranjith Kumar · Answer 1 · 2019-10-10T12:06:44.687

-2

Use Ajax instead of this...........

Updated->

PHP Page

$response['id'] = $id;
$response['name'] = $name;
$json = array("id" =>$response['id'],"name" =>$response['name']);

JS

$.ajax({
type: "POST",
url: "myphppage.php",
success: function(result) {
alert(result.id);
alert(result.name);
}
});

edited Oct 10 '19 at 12:06

answered Oct 10 '19 at 05:36

Ranjith Kumar

171
3
21

$ajax return a not a function error – Abram Oct 10 '19 at 05:37
``$.ajax({ type: "POST", url: "myphppage.php", success: function(result) { alert('success'); } } });`` – Ranjith Kumar Oct 10 '19 at 05:38
share your exact error here.. – Ranjith Kumar Oct 10 '19 at 05:39
resep.js:8 Uncaught TypeError: $.ajax is not a function at HTMLDivElement. (resep.js:8) at HTMLDivElement.dispatch (jquery-3.3.1.slim.min.js:2) at HTMLDivElement.v.handle (jquery-3.3.1.slim.min.js:2) at Object.trigger (jquery-3.3.1.slim.min.js:2) at HTMLDivElement. (jquery-3.3.1.slim.min.js:2) at Function.each (jquery-3.3.1.slim.min.js:2) at w.fn.init.each (jquery-3.3.1.slim.min.js:2) at w.fn.init.trigger (jquery-3.3.1.slim.min.js:2) at o.t.show (modal.js:119) at HTMLDivElement. (modal.js:535) – Abram Oct 10 '19 at 05:43
check my update answer or check here also... Use Ajax instead of this........... **Updated** **PHP Page** ``$response['id'] = $id; $response['name'] = $name; $response['note'] = $note; $response['image'] = $image; $response['bumbu'] = $bumbu; $response['banyak'] = $banyak; $response['masak'] = $masak; $response['images'] = $images; $json = array("id" =>$response['id'],"name" =>$response['name']);`` **JS** ``$.ajax({ type: "POST", url: "myphppage.php", success: function(result) { alert(result.id); alert(result.name); } });`` – Ranjith Kumar Oct 10 '19 at 05:45
OP is using jQuery-slim, there is no `$.ajax` method – Phil Oct 10 '19 at 05:47
keeps returning the same $ajax is not a function error.. am I missing something here? – Abram Oct 10 '19 at 05:48
can't understand your words @Phil – Ranjith Kumar Oct 10 '19 at 05:49
did you add jquery.min.js @Abram – Ranjith Kumar Oct 10 '19 at 05:50
OP (Original Poster) aka @Abram is using jQuery-slim, not the full version of jQuery. jQuery-slim does not include any AJAX functions. There is no reason to include the full version of jQuery because `fetch()` (which they are using in their question) does the job just fine – Phil Oct 10 '19 at 05:50
First you can use this cdn instead of jquery-slim: – Ranjith Kumar Oct 10 '19 at 05:51
@Abram please don't. You do not need jQuery's AJAX functions – Phil Oct 10 '19 at 05:55
did you try anything apart from this? @Abram – Ranjith Kumar Oct 10 '19 at 06:06
Check this newly updated answer buddy... @Abram – Ranjith Kumar Oct 10 '19 at 12:08

Fetch json_encode from php in javascript

1 Answers1