Passing data from PHP to JavaScript: methods, their pros and cons, and how to implement them

PHP for Beginners course: ➤ davehollingworth.net/phpy
PHP MVC course: ► davehollingworth.net/phpmvcy
CodeIgniter 4 course: ► davehollingworth.net/codeigni...
If you have a variable in PHP, and you need to use its value in JavaScript in the browser, how do you get the value of this variable from PHP to JavaScript?
In this video we'll look at various solutions to achieve this, from writing out the value into the JavaScript or DOM in the original request, making sure we escape it, to using a cookie, and using Ajax. We'll also look at their advantages and disadvantages.
Which method you choose depends on how much data there is, and how complex your page is: whether it's a simple PHP script or a more complex web applications.
Code shown in the video:
gist.github.com/daveh/56fd2fa...
00:00 Intro
00:17 The problem
01:21 Simple echo
03:11 Escaping
05:00 JSON encoding
06:10 Hidden field
07:58 Meta tag
09:04 Data attribute
10:30 Cookie
13:20 Ajax request
16:14 Summary

[@nadimalaa8961]

I will look back on those days where I am starting to learn PHP, and remember how Dave Hollingworth made me love PHP.

[@ashikmehermobin9926]

I think You are one of the most underrated applied content creator in you tube

[@codingzen869]

Your channel is absolutely underrated. You are incredibly good at explaining with simplicity and deserve way more bigger audience.

[@dave-hollingworth]

Thank you so much for your kind words!

[@Artem977471]

Thanks a lot, Dave. You are incredible teacher!

[@lammabing6401]

Really clear and concise demonstrations & explanations. Appreciated. Thanks.

[@Isra-p1]

Wow Dave this video is very well done, thorough and informative as usual, thank you.

[@abedabdesselem9491]

Very informative and straight forward, thanks a lot.

[@fatimaadreeta]

An absolutely beautiful video. Any form of thank you would be an understatement 🙏🙏💚💚

[@ozgrymn]

Very nice and clean explanation, awesome, thank you!

[@israrguldurrani]

It is a very helpful video. Thank you Dave!

[@NoahNobody]

Oww, so many neat tricks. And that meta tag assignment blew my mind.

[@codeclassroom]

I have learned a lot in this video. You are very clear and nice.

[@mounir101]

Thanks so much Dave, we got the idea.

[@johnpaul5836]

Superb tutorial. The best I have seen on this subject.

[@qwerasdf1727]

really helpful tutorial! thanks a lot for your job!

[@constantine9074]

Ive been searching for this !!!!!!!

[@pellepels50]

Very good explained. Thanks

[@pitaji_badewale]

Thanks brother for this amazing content

[@abat_dauletbaev]

Thank you very much for information, really useful.

[@kevin_neugebauer]

thanks! very great tutorial!

[@hiajayy]

Nice explanation.thank you🙏

[@javierrodriguez4218]

Very comprehensive!

[@tiksong7613]

Thank you so much.

[@med3060]

thank you so much Dave !

[@fraidoonhu9284]

Wow thanks, you are great.

[@ademineshat]

Very useful 👍 thanks

[@Dexter101x]

Dayam, never knew how to code cookies, and setting the json to the header, a new thing for me as well

[@rohitadhikari3811]

Is php still popular?

[@Alextaggart4908]

That was helpful

[@anurajms]

thank you

[@technoking536]

Great!

[@itouswenqtenrih9018]

Thank you

[@JuanBotes]

thanks for sharing your knowledge \o/

[@emperoroftheearth3215]

Thanks

[@mounir101]

I've subscribed to get more lessons.

[@NedumEze]

Wow! Amazing!
Thank you so much sir. Can I believe it's also possible the other way? Javascript to PHP?

[@dave-hollingworth]

Yes, if you send any HTTP request to a PHP script using Ajax, you can send data to a PHP script on the server

[@emmanuellyons6827]

Please make a video about a social media website like Facebook in php
Nothing deep, just the basics of getting posts.
❤️

[@pablokaram1411]

Big fan of all your courses!!!, Dave can you help me with one question please? i need to pass an array from PHP to a script of JS in the same page, to use the array as a value of an object's property inside the JS script, (i try to embedd in the "labels" property of Chart JS an array of information comming from the database) i tried a lot of techniques but i can't succeed in the task, do you have any recomendation?

[@dave-hollingworth]

Did the techniques shown in this video not work for you? If not, I would try doing it step by step, first writing out the array from PHP, then making sure JavaScript can access it ok, then try assigning that value to the object property in JavaScript. The browser console can help here to show you any errors in the variable value that might occur.

[@seeker3794]

How to make all files separate?

[@AzharUddin-ob7vb]

I know this is off topic
But can you make an video
How to encrypt url or query parameter in JavaScript and decrypt in php
Using cryptoJS
I think no one have created this video and it's very imp to know everyone

[@dave-hollingworth]

Ok will look into it, thank you for the recommendation!

[@gorgosanma]

Very clear and nice video. But I'm finding out how much I hate working with php and javascript. If I want to have 2 separate files to send a value from js to php, let the php process and bring back a variable there's no way to do this. I have to do like this example altogether but it ends up with a monster code in one file. Man, I swear once I finish this project I'm out of php or even coding for good. This is so frustrating!
Sorry, I needed to vent.

[@seeker3794]

Can't we have php html and javascript separately? For I have recognized the extension of .html is .php in your video.

[@dave-hollingworth]

Yes, you can separate them into different files if you like, that's quite common

[@TheJohcker]

Do you use php framework, what php framework you recommended?
Thanks.

[@dave-hollingworth]

I recommend CodeIgniter, as it's lightweight and simple

[@kkch980]

In Laravel 9, how to pass a data from controller file to the JavaScript in blade.php view file?

[@dave-hollingworth]

You can probably just do it the same way as in plain PHP, but instead of using echo, use the blade equivalent to print out a variable, e.g. {{ $name }}

[@kkch980]

@@dave-hollingworth thank you

[@fastcontact]

you could also use localstorage as another method, too ;)

[@dave-hollingworth]

Well, you can only store a value in local storage using JavaScript, so you'd have the same issue - e.g. window.localStorage.setItem("name", "");

[@mnamihas]

❤

[@techgensu2039]

sir is it possible to pass query result using ajax fetch()? please give me a sample code

[@dave-hollingworth]

One way would be to encode the data in PHP into JSON, for example fetching it as an associative array, then using json_encode to write it out as JSON. You can then read this JSON easily in the client.

[@pgclecturesworld]

hi brother i want to some little favour of your. Javascript problem in php. can you help to solve this?

[@dave-hollingworth]

Please describe your problem

[@ngabohakiza3988]

hello i dont know if you ll see this but right now i need help I const get the Post api to work using javascript to post

[@dave-hollingworth]

What exactly happens? Do you get any error messages? You can use the browser network console (in the developer tools) to see if there are any errors

[@Edflow720]

I need the value of a decimal number, this value in decimal is in PHP code, but I need the data in the Script, all this inside the same file, as well as your first examples in this video.
Can you tell me how to get it?
I'm not getting any data from the PHP to the Script.

[@dave-hollingworth]

The examples shown in the video should work for decimal values - what happens when you try it, do you get any errors?

[@Edflow720]

@@dave-hollingworth When I put the PHP variable in the Script, it does not receive the information, even I have put it in several ways and I have printed it in the console, it does not receive any value at all.

[@dave-hollingworth]

@@Edflow720 What code are you using to print out the value?

[@ramonlips9586]

Which IDE are you using?

[@dave-hollingworth]

Visual Studio Code

[@ramonlips9586]

@@dave-hollingworth which theming extensions? Cause yours looks hella clean

[@dave-hollingworth]

@@ramonlips9586 I disabled all the programming assistants, which although useful when coding, are a distraction when teaching. I based it on this: medium.com/@marciobarrios/minimal-user-interface-for-visual-studio-code-2ab849eb6d8e

[@photoinshot1355]

Excellent tutorial, very well explained, very clearly presented, many thanks I found it very interesting and helpful, especially the last example using a data.php file. You mentioned this is better for large amounts of data but you only gave an example with one variable. I have failed to get it to work with two variables. Being relatively new to JS I tried the obvious:
$name = "Bill";
$lastName = "Smith";
header('Content-Type: application/json');
echo json_encode($name, $lastName);
Then
$name = "Bill";
$lastName = "Smith";
header('Content-Type: application/json');
echo json_encode($name);
echo json_encode($lastName);
How could I alter it to work, I'm thinking there must be a simple way, the data I want to use is not really related as in this example I thought I would just try it out.

[@dave-hollingworth]

Just to clarify, this is PHP code and not JS code. Try encoding them in an array:
echo json_encode(["name" => $name, "lastName" => $lastName]);

[@photoinshot1355]

@@dave-hollingworth Thanks for taking the time to answer my question, I really appreciate it. Having changed the code to: $name = "Bill";
$lastName = "Smith";
header('Content-Type: application/json');
echo json_encode(["name"=>$name,"lastName"=>$lastName]);
I now get this in the alert message: Hello [object Object]
When using this as the js script:
fetch('data.php')
.then(function(response){
return response.json();
})
.then(function(data){
alert('Hello '+ data);
});
I know I must be missing something really basic here but I would appreciate a nudge in the right direction if possible. Thanks

[@photoinshot1355]

Thanks for anyone else interested I got a working solution by doing the following: let name, lastName =[];
fetch('data.php')
.then(function(response){
return response.json();
})
.then(function(data){
name=data.name;
lastName=data.lastName;
alert('Hello '+ data);

console.log(name);

}); Many thanks again for a very helpful video.

[@dave-hollingworth]

@@photoinshot1355 Thank you for posting your solution!

[@dave-hollingworth]

@@photoinshot1355 In the JavaScript, "data" is an object, so try
alert("Hello " + data.name);

[@g7k993]

Mobile device users would appreciate a bigger font ( for the code ~18pt). Was hard seeing the code using my iPhone.

[@dave-hollingworth]

Ok, noted! Will look into that for the next video.

[@indrajitmandal5985]

Getting an error:- "Syntax Error: not a valid json"

[@dave-hollingworth]

You can validate JSON here: jsonlint.com/

[@temirkhanamanbaev42]

Explanation in plain language