Ajax trong laravel

('#form-add').submit(function(e){ e.preventDefault(); //bắt sự kiện nút submit để hoãn sự kiện var url=(this).attr('data-url'); //viết ajax $.ajax({ type: 'post', //check bằng route:list , url : url, //là data-url đặt ở mỗi nut add,edit,delete(đường dẫn) data :new FormData(this), dataType: 'json', //kiểu dữ liệu trả veef response ở controller contentType: false, cache :false, processData: false, success:function(response){ toastr.success('them thanh cong') $('#modal-add').modal('hide'); setTimeout(function(){ window.location.href="{{route('index.author')}}"; },500); } });

    });

đây là code mk isert vào ạ thì có name,images,và birthday,

@khanh1234 việc sử dụng ajax cho update thì cũng không khác gì cả, nếu đang làm như này chỉ cần trên code update server check xem khi update có update ảnh ko, nếu có thì code như phần insert, còn nếu không có ảnh đc gửi lên thì update những trường khác trừ image ra.

@le.vinh.thien vâng mình đang vướng chỗ ,click edit hiện thông tin thì sẽ show các thông tin theo id,thường thì sẽ .val(),div để hiện images sử lý thế nào ạ,mình mới làm quen ajax nên cx chưa thành thạo lắm ạ

@khanh1234 có nhiều cách nhưng với cách bạn đang hỏi thì trong trường này bạn phải có 2 quá trình

1. Click edit A => ajax để lấy thông tin A -> edit DOM để giá trị A chui vào form edit (chắc là trong modal).

    -> phải có api để lấy dữ liệu cái A theo id(or theo 1 identifier bạn quy định), dữ liệu trả về có thể json/html tuỳ bạn
   

2. Khi edit xong thì bấm nút lưu -> dùng ajax để call api update, cách làm gần giống create

@le.vinh.thien data: { hoten: $('#hoten-edit').val(), gioitinh: $('#gioitinh-edit').val(), ngaysinh: $('#ngaysinh-edit').val(), sdt: $('#sdt-edit').val(), diachi: $('#diachi-edit').val(), }, nếu mk lấy thông của 1 record có những trường dữ liệu này thì có images có .val() được k ạ hay html

@khanh1234 đối với image ko thể dùng .val() được.

Cái này bạn có thể trực tiếp thử mà nhỉ

@le.vinh.thien vâng nếu em muốn hiển thị dữ liệu có title,images thì trong data:{ sử lý như nào ạ } và update cx thế

@le.vinh.thien images thì dùng .html à bạn

@khanh1234 sẽ sử dụng đoạn như dưới

var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file',files);

tham khảo thêm: https://makitweb.com/how-to-upload-image-file-using-ajax-and-jquery/

@le.vinh.thien upload ảnh thì mk làm được rồi ạ,mình đang bị lỗi edit 1 record, Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'

@khanh1234 bạn đừng truyền new FormData(this), làm đúng như đoạn mình bảo:

var fd = new FormData(); // đừng truyền gì vào contructor của nó 
fd.append('field', value) // ví dụ vậy

@le.vinh.thien vâng thế nếu mk khai báo như thế này thì , data: fd, có truyền được cả text k ,ví dụ mk sửa thì có trường titile nx ạ

@khanh1234 tất nhiên có rồi, bạn cứ append data vào trong FormData thôi.

p/s: bạn làm gì thì nên hiểu nguồn gốc, ví dụ mình thấy bạn có dùng FormData nhưng bạn còn chưa hiểu tại sao cần nó, nó gồm những gì và sử dụng ra sao.

ý mk là khi click button edit thì hiện modal ,làm sao để đổ dữ liệu của ảnh ạ,thường thì text sẽ là ('#name-edit').val(), còn images thì sẽ k sử dụng được val

@khanh1234 Chính vì thế nên chẳng ai đổ dữ liệu ảnh ra mục value của input file đâu bạn mà sẽ có một thẻ img để hiển thị ảnh hiện tại. Chỗ chọn ảnh luôn là chọn ảnh mới và upload lại file mới lên server.

Trên controller, nếu cái request update mà thấy có file ảnh được upload lên thì bạn sẽ xử lý lưu ảnh giống như bạn làm trong mục create.

@huukimit vâng, em định cho 1 cái img để hiện ảnh hiện tại nhưng chưa biết viết thế nào trong ajax để hiện,bt sử lý sẽ là thư mục lưu ảnh và id

@khanh1234 Trong controller bạn query data đã tạo ở phần create ra theo id. Sau đó thì lấy link ảnh từ data rồi render blade view thì thực hiện render thêm thẻ img. Nếu không dùng blade view thì sau khi trang load thành công, bạn cần ajax lên để lấy data rồi add lại link cho thẻ img.

@huukimit Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement' em update record ,bị dính lỗi này ạ