PHP2JS: Chia sẻ dữ liệu giữa PHP và JavaScript

PHP2JS là gói Laravel cho phép bạn chia sẻ dữ liệu giữa PHP và JavaScript bằng một lệnh. Tìm hiểu cách sử dụng nó và cải thiện quy trình phát triển web của bạn.

Dưới đây là ví dụ về cách gói tài liệu minh họa này chia sẻ dữ liệu từ bộ điều khiển với chế độ xem có thể truy cập bằng JavaScript:

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

Điều này được cung cấp thông tin qua bao PHP2JS object bao gồm dữ liệu từ chế độ xem:

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

Bạn cũng có thể xác định các giá trị sẽ được chia sẻ với chế độ xem riêng biệt với các giá trị được chuyển đến chế độ xem Blade bằng phương thức toStrictJS() :

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

Cuối cùng, bạn cũng có thể làm việc với dữ liệu đối tượng được cung cấp cho JavaScript thông qua các gói chức năng trên đối tượng PHP2JS :

// 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");

Gói này cũng cung cấp một công cụ có tên QuickRequest để đơn giản hóa công việc thực hiện các API yêu cầu từ JavaScript đến chương trình hỗ trợ Laravel của bạn:

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

Bạn có thể tìm hiểu thêm về gói này, nhận đầy đủ hướng dẫn cài đặt và xem ví dụ trong chính thức tài liệu ; dự án mã nguồn cũng có sẵn trên GitHub tại rmunate/PHP2JS .

#javascript  #php