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

[@Artem977471]

Thanks a lot, Dave. You are incredible teacher!

[@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!

[@abedabdesselem9491]

Very informative and straight forward, thanks a lot.

[@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.

[@ozgrymn]

Very nice and clean explanation, awesome, thank you!

[@israrguldurrani]

It is a very helpful video. Thank you Dave!

[@fatimaadreeta]

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

[@johnpaul5836]

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

[@mounir101]

Thanks so much Dave, we got the idea.

[@codeclassroom]

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

[@NoahNobody]

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

[@qwerasdf1727]

really helpful tutorial! thanks a lot for your job!

[@pitaji_badewale]

Thanks brother for this amazing content

[@pellepels50]

Very good explained. Thanks

[@hiajayy]

Nice explanation.thank you🙏

[@tiksong7613]

Thank you so much.

[@abat_dauletbaev]

Thank you very much for information, really useful.

[@constantine9074]

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

[@javierrodriguez4218]

Very comprehensive!

[@med3060]

thank you so much Dave !

[@kevin_neugebauer]

thanks! very great tutorial!

[@fraidoonhu9284]

Wow thanks, you are great.

[@technoking536]

Great!

[@Alextaggart4908]

That was helpful

[@ademineshat]

Very useful 👍 thanks

[@anurajms]

thank you

[@itouswenqtenrih9018]

Thank you

[@JuanBotes]

thanks for sharing your knowledge \o/

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

[@emperoroftheearth3215]

Thanks

[@mounir101]

I've subscribed to get more lessons.

[@emmanuellyons6827]

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

[@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

[@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.

[@mnamihas]

❤

[@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.

[@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);

[@TheJohcker]

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

[@dave-hollingworth]

I recommend CodeIgniter, as it's lightweight and simple

[@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", "");

[@seeker3794]

How to make all files separate?

[@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

[@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

[@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

[@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

[@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.

[@temirkhanamanbaev42]

Explanation in plain language

[@indrajitmandal5985]

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

[@dave-hollingworth]

You can validate JSON here: jsonlint.com/