Cách gửi (submit) dữ liệu một Form mà không tải lại trang web hiện tại

sown0512 · September 25, 2020, 11:54am

Chào mọi người, nếu như có dữ liệu một form, sau khi nhấn submit thì nó sẽ load lại trang web (vì em sử lý dữ liệu ngay tại trang đó). Có cách nào để nó ngăn điều đó xảy ra không ạ.
Em cảm ơn rất nhiều

HR16 · September 25, 2020, 4:49am

Đây là một vấn đề đã xuất hiện từ rất lâu và cách giải quyết cũng đã có từ lâu rồi. Bình thường, việc update dữ liệu mới trên trang được làm một cách đồng bộ nên muốn update dữ liệu mới phải reload nguyên cái trang web đó.
=> Dẫn đến hiện tượng “khi nhấn submit thì nó sẽ load lại trang web”.

Cách giải quyết là thay vì update dữ liệu trên trang một cách đồng bộ thì làm nó một cách bất đồng bộ. Hiện tại, có 2 cách là dùng AJAX hoặc Fetch.

Ngoài ra, đây là vấn đề bên client (front-end) nên không cần gắn tag PHP vào đâu.

sown0512 · September 25, 2020, 5:03am

Em cảm ơn rất nhiều ạ

sown0512 · September 27, 2020, 6:14am

Chào mọi người, em đang bị 1 vấn đề là em có 1 cái form để gửi dữ liệu đi xử lý, khi em sử dụng Tự động gửi dữ liệu form (auto submit form - ajax) và Không tải lại trang web không hoạt động với nhau được. Chỉ hoạt động 1 trong hai mà thôi.
Anh chị có cách nào giải quyết vấn đề này không ạ
Em cảm ơn rất nhiều

TyE · September 27, 2020, 6:14am

Hi, Hà Mã Tím đáng yêu đoán là bạn đang gắn lời gọi AJAX vào onclick của submit button.
Khi nhấn thì AJAX vẫn gọi nhưng form cũng bị submit khiến trang web tải lại.
Trường hợp này bạn cần ngăn form submit bằng cách return false tại onSubmit:

<form onsubmit="return false">
</form>

Nếu không đúng trường hợp bạn cần thì bạn mô tả thêm nhé.

sown0512 · September 27, 2020, 6:14am

Em cảm ơn ạ, nhưng nó không hoạt động luôn ạ :v
Code của em đây ạ, nó autosubmit và vẫn bị load lại trang web.

HR16 · September 27, 2020, 6:35am

Thay <button type="submit"...> thành <button type="button"...> là xong :V.

Ngoài ra, ở đoạn JS có hai vấn đề:

Code ở đoạn data hơi dài, nhìn không đẹp lắm, tốt nhất nên xuống dòng.
Lỡ như mạng quá chậm, gửi request lên server tốn hơn 8 giây thì sao? Hay là cần khi gửi request xong thì làm gì đó thì sao, chẳng lẽ lại dùng callback, nhưng vấn đề là dùng callback nhiều quá là bị dính callback hell. Tốt nhất là đợi gửi request xong hẵng đợi 8 giây, có thể tìm hiểu về Lập trình bất đồng bộ trong Javascript để làm.

tonghoangvu · September 27, 2020, 6:33am

Gọi event.preventDefault() khi submit form coi sao

sown0512 · September 27, 2020, 7:01am

Nếu đổi type=“button”, thì nó không gửi dữ liệu đi được ạ

sown0512 · September 27, 2020, 7:11am

Nếu gọi thì dữ liệu nó không truyền đi được anh ạ

TyE · September 27, 2020, 7:56am

bạn có thử:

<form action="" method="POST" id="myForm" name="myForm" onsubmit="return false">
....

hay chưa?

Binh_Thach · January 30, 2021, 4:37am

Thứ nhất: bạn dùng button type=“button” để không gọi form, thứ 2 bạn đang dùng ajax thì bạn phải cho đường dẫn truyền dữ liệu và nhận dữ liệu về, để thêm đường truyền dữ liệu thì bạn thêm url:…, với … là đường dẫn đến file nhận dữ liệu và xử lý. code hiện tại của bạn, trong phần ajax chưa hề có đường truyền dữ liệu thì nó đâu biết bạn truyền đi đâu

TaoLaoBidaoBanBanhBa · January 30, 2021, 5:13am

#1. Xài Ajax để submit form. Cách này nhiều anh chị bên trên đã nói rồi, chỉ cần viết đúng syntax là chạy thôi.

#2. Nếu bạn xài PHP, thì có thể dùng self-submit. Logic:

cái form sẽ submit tới chính page đang điền form, gửi post/get như bình thường
khi page load lại (sau submit), thì PHP sẽ lấy dữ liệu khi nãy, điền ngược lại vào form, như vậy thì cũng không khác lắm với yêu cầu “page không tại lại”

    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
        Name: <input type="text" name="name" value="<?php echo  $_POST["name"]; ?>"><br>
        Email: <input type="text" name="email" value="<?php echo  $_POST["email"]; ?>"><br>
        <input type="submit">
    </form>

Mình code chay đại khái vậy, bạn google thêm cách sử dụng nha, cách này cũgn tiện, chỉ là hơi dài dòng chút.