Share Data giữa PHP và JavaScript với PHP2JS

The PHP2JS package for Laravel is an opinionated way to standardize the process of sharing data between PHP and JavaScript. There are many approaches to sharing data between the frontend and backend, so this package might not be for everyone, but it could offer you a simple solution for sharing data with JavaScript in a consistent way.

Here's an example from the documentation that illustrates how this package shares data from the controller with the view that is made accessible to JavaScript:

class YourController extends Controller
{
    public function index()
    {
        return view('welcome')->with([
            'moonLandingDate' => '1969-07-20'
        ])->toJS();
    }
}

This is made available via a PHP2JS object that includes data from the view:

let moonLandingDate = PHP2JS.data.moonLandingDate;
// '1969-07-20'

You can also define values that should be shared with the view separately from the values passed to the Blade view using the toStrictJS() method:

$astronauts = [
    'Neil Armstrong',
    'Buzz Aldrin',
    'Michael Collins'
];
 
return view('welcome')->with([
    'astronauts' => $astronauts
])->toStrictJS([
    'spacecraft' => "Lunar Module Eagle",
    'event'      => "Apollo 11 Moon Landing",
]);

Lastly, you can also work with the data object made available to JavaScript via the package's functions on the PHP2JS object:

// Assign a copy of the object to a new variable at runtime.
// Remember to replace PHP2JS with the Alias you have used.
const __PHP = PHP2JS.assign();
 
// Extract data or validate if it exists in
// the object delivered by PHP:
const post = PHP2JS.only('post');
const hasPost = PHP2JS.has('post');
 
// Get a value
PHP2JS.get("date");

This package also offers a tool called QuickRequest to simplify making API requests from JavaScript to your Laravel backend:

/**
 * Considering that this value is retrieved from
 * somewhere in a JS variable.
 */
const idRecord = 10;
 
/**
 * Use the route structure created in web.php.
 */
QuickRequest().get({
    url: '/record/' + idRecord,
    success: function (res) {
        console.log("Successful Process, Data: ", res.data);
    },
    error: function (err) {
        console.error("Error: " + err.data.message);
    }
});

You can learn more about this package, get full installation instructions, and view examples in the official documentation; the project source code is also available on GitHub at rmunate/PHP2JS.