Lấy giá trị trả về từ Server Laravel để dùng trong file Javascript

[sale (Sa Lệ)]

Chào các anh chị, cho em hỏi làm sao để Javascript lấy được biến trả về từ server.

• file addProduct.blade.php, em có code:

  <p>...</p>
  

  <script src="{{ mix('js/frontend/app.js') }}"></script>

• file js/frontend/app.js em ko thể lấy được giá trị của {{ Session::get(‘layoutErrorNotify’) }} để dùng hàm showModal được.
  Theo em hiểu thì bởi vì {{ Session::get(‘layoutErrorNotify’) }} chỉ có thể lấy được giá trị khi ở trong file blade.
  Vậy làm thế nào để lấy được giá trị từ server về để dùng trong file ‘js/frontend/app.js’ vậy ạ

[rockleetran (noname)]

T nghĩ là ở trong file blade đó tạo 1 biến toàn cục trong thẻ script:
const layoutErrorNotify ={{ Session::get(‘layoutErrorNotify’) }};
Rồi dùng biến đó ở file script của bạn

[superthin (Vô Thin)]

@sale

Vậy làm thế nào để lấy được giá trị từ server về để dùng trong file ‘js/frontend/app.js’ vậy ạ

Để JavaScript lấy được cái gì thì bên PHP bạn phải xuất được nó qua HTML, file JSON hoặc Cookie. Còn nếu không có cái đó thì thua nhé.

Có vẻ như bạn bắt tay vào làm web nhưng đi quá nhanh, chưa vững về server - client hoạt động thế nào, đặc trưng của riêng PHP, JavaScript mà đã vội nhảy vào Laravel - một framework mà người viết mã PHP phải ít nhất vài năm mới nên nhúng tay.

Điều này đang dẫn đến “thấy cây mà không thấy rừng”. Giờ mình hỏi là khi chạy cái file của bạn, khi xem trang, bấm Ctrl + U để xem source HTML thì {{ Session::get(‘layoutErrorNotify’) }} xuất hiện chỗ nào trên trang đó? Nếu không thấy xuất hiện chỗ nào, bạn cũng không tạo ra Cookies hay file JSON thì JavaScript của bạn đọc được giá trị đó bằng niềm tin à? Cụ thể Session::get(‘layoutErrorNotify’) hoàn toàn nằm trong bộ nhớ trên server được PHP quản lý thì JavaScript mà kết nối vào đó được là quá thần thánh.

Nếu bạn học PHP đơn giản cái {{ Session::get(‘layoutErrorNotify’) }} bạn hiểu trong thực tế gần như sau trên trang HTML:

<script>
   let layoutErrorNotify = <?php echo $beep->Session::get(‘layoutErrorNotify); ?>;
   console.log(layoutErrorNotify);
</script>

Vậy nhé, nói đến đây mà bạn vẫn đếch biết mình nói gì thì nên học lại, chầm chậm, kỹ lưỡng hơn.

[HanQuaNhanh (Hàn Quá Nhanh)]

Để lấy giá trị từ server và sử dụng trong file js/frontend/app.js , bạn có thể sử dụng một số cách sau:

1. Truyền giá trị từ Blade template xuống script: Trong file addProduct.blade.php , bạn có thể truyền giá trị từ Blade template xuống script thông qua các cách sau:

a) Gán giá trị vào một biến JavaScript:

htmlCopy code

<!-- addProduct.blade.php -->
<p>...</p>
<script>
  var layoutErrorNotify = @json(Session::get('layoutErrorNotify'));
</script>
<script src="{{ mix('js/frontend/app.js') }}"></script>

Sau đó, bạn có thể sử dụng biến layoutErrorNotify trong file app.js .

b) Sử dụng data-* attributes:

htmlCopy code

<!-- addProduct.blade.php -->
<p>...</p>
<div id="myDiv" data-layout-error-notify="{{ Session::get('layoutErrorNotify') }}"></div>
<script src="{{ mix('js/frontend/app.js') }}"></script>

Trong file app.js , bạn có thể lấy giá trị từ data-layout-error-notify như sau:

javascriptCopy code

// app.js
var layoutErrorNotify = document.getElementById('myDiv').getAttribute('data-layout-error-notify');

2. Sử dụng Ajax request: Trong file app.js , bạn có thể tạo một request Ajax để lấy giá trị từ server thông qua một endpoint được cung cấp bởi server. Sau khi nhận được giá trị từ server, bạn có thể sử dụng nó trong app.js .

javascriptCopy code

// app.js
fetch('/api/getLayoutErrorNotify')
  .then(response => response.json())
  .then(data => {
    var layoutErrorNotify = data.layoutErrorNotify;
    // Sử dụng giá trị layoutErrorNotify ở đây
  })
  .catch(error => {
    console.error('Lỗi khi lấy giá trị từ server:', error);
  });

Trong ví dụ trên, bạn cần tạo một endpoint /api/getLayoutErrorNotify trên server để trả về giá trị layoutErrorNotify .

Chú ý rằng, cách 2 (Ajax request) có thể yêu cầu thêm công việc phía server để xử lý request và cung cấp dữ liệu.

[Kulteam (The Wind)]

Có 2 cách nhé

1.Server render giá trị script trong file template !

Ví dụ

<script> let a = {{value_a}};
let b ={{value_b}};
</script>

2.Call api đến server để lấy giá trị !

var url="api/v1/function";
var data ="some_date";
$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType

});