Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Tạo form submit không cần load lại trình duyệt
Tạo form submit không cần load lại trình duyệt
Nguyễn Trung Hiếu
Share Code Web Company 2012

Tạo form submit không cần load lại trình duyệt

Bài viết sau sẽ hướng dẫn các bạn làm một trang có form submit không cần load lại trang cũng không cần phải gửi dữ liệu qua ajax.

Ảnh tham khảo kết quả sau khi thực hành xong bài này:

submit without refresh page

I. HTML

Trước tiên là thiết kế một trang html để làm form gửi dữ liệu cái đã. Đây là một form đơn giản gồm 3 thẻ input, 1 trường textarea. Chú ý form này sẽ có action là tập tin submit.php

II. Javascript

Sau đó chúng ta add thư viện jQuery vào nhé

Hàm $(‘#form’).ajaxForm() có id là id của thẻ FORM, hàm này thực hiện post dữ liệu tới file submit.php mà không cần refresh trình duyệt, nếu thành công thì cho phép hiển thị #preview.
Ngoài ra chúng ta cũng cần làm một vài đoạn mã jQuery để thực hiện validate dữ liệu xem chính xác chưa

III. Database

Xong về mặt giao diện, tiến tới thiết kế database để nó nhận dữ liệu vào chứ nhỉ. Nào làm một cái database đơn giản.

Và thủ tục kết nối tới database trong file db.php

IV. File Submit.php

Giờ là việc tạo ra một file mang tên submit.php để thực hiện nhận dữ liệu, và insert chúng vào database. Như đã nói ở trên, sau khi submit dữ liệu ở file index.html, dữ liệu sẽ được qua file submit.php để xử lý trước khi lưu vào cơ sở dữ liệu.

Nếu thành công sẽ trả về đoạn thông báo đã submit dữ liệu.
Done! Chúc bạn thành công

Download share code

Download code

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}
%d bloggers like this: