AJAX gửi biểu mẫu JavaScript
AJAX (JavaScript và XML không đồng bộ) là nghệ thuật trao đổi dữ liệu với máy chủ và cập nhật các phần của trang web – mà không cần tải lại toàn bộ trang Show Bài đăng trên blog trước đây của chúng tôi đã giải thích về việc gửi biểu mẫu mà không cần làm mới trang, nhưng nó đã được thực hiện bằng cách sử dụng ajax, PHP và jQuery Bây giờ bạn sẽ tìm hiểu chức năng tương tự bằng cách sử dụng ajax, PHP và Javascript thông qua bài đăng trên blog này. Chỉ cần theo dõi bài viết của chúng tôi hoặc tải xuống để sử dụng Đối với điều này, bạn phải có một cơ sở dữ liệu trong MYSQL. Ở đây, chúng ta có cơ sở dữ liệu tên là “mydba” bao gồm bảng tên là “form_element” với 5 trường Biểu mẫu HTML có thể gửi yêu cầu HTTP theo cách khai báo. Nhưng các biểu mẫu cũng có thể chuẩn bị một yêu cầu HTTP để gửi qua JavaScript, chẳng hạn như qua Với các ứng dụng web lũy tiến, ứng dụng trang đơn và ứng dụng dựa trên khung, người ta thường sử dụng biểu mẫu HTML để gửi dữ liệu mà không cần tải tài liệu mới khi nhận được dữ liệu phản hồi. Trước tiên hãy nói về lý do tại sao điều này đòi hỏi một cách tiếp cận khác Gửi biểu mẫu HTML tiêu chuẩn, như được mô tả trong bài viết trước, tải URL nơi dữ liệu được gửi, có nghĩa là cửa sổ trình duyệt điều hướng khi tải toàn bộ trang. Tránh tải toàn bộ trang có thể mang lại trải nghiệm mượt mà hơn bằng cách tránh giật mạng và các sự cố hình ảnh có thể xảy ra như nhấp nháy Nhiều giao diện người dùng hiện đại chỉ sử dụng các biểu mẫu HTML để thu thập thông tin đầu vào từ người dùng chứ không phải để gửi dữ liệu. Khi người dùng cố gắng gửi dữ liệu, ứng dụng sẽ kiểm soát và truyền dữ liệu không đồng bộ trong nền, chỉ cập nhật những phần của giao diện người dùng yêu cầu thay đổi Gửi dữ liệu tùy ý không đồng bộ thường được gọi là AJAX, viết tắt của "JavaScript và XML không đồng bộ" Đối tượng DOM 1) được tạo từ danh sách các cặp khóa/giá trị được mã hóa URL. Để truyền dữ liệu nhị phân, yêu cầu HTTP được định hình lại thành 2Ghi chú. Ngày nay, API tìm nạp thường được sử dụng thay cho XHR — đây là phiên bản cập nhật, hiện đại của XHR, hoạt động tương tự nhưng có một số ưu điểm. Hầu hết mã XHR mà bạn sẽ thấy trong bài viết này có thể được hoán đổi cho Tìm nạp Nếu bạn kiểm soát giao diện người dùng (mã được thực thi trong trình duyệt) và back-end (mã được thực thi trên máy chủ), bạn có thể gửi JSON/XML và xử lý chúng theo cách bạn muốn Nhưng nếu bạn muốn sử dụng dịch vụ của bên thứ ba, bạn cần gửi dữ liệu theo định dạng mà dịch vụ yêu cầu Vì vậy, làm thế nào chúng ta nên gửi dữ liệu như vậy? Có 3 cách để gửi dữ liệu biểu mẫu
Hãy xem xét chúng một cách chi tiết
Hãy xem một ví dụ
Và bây giờ là JavaScript
Đây là kết quả trực tiếp Ghi chú. Việc sử dụng Xây dựng một yêu cầu HTTP bằng tay có thể quá sức. May mắn thay, đặc tả XMLHttpRequest cung cấp một cách mới hơn, đơn giản hơn để xử lý các yêu cầu dữ liệu biểu mẫu với đối tượng 4Đối tượng 4 có thể được sử dụng để tạo dữ liệu biểu mẫu để truyền hoặc để lấy dữ liệu trong phần tử biểu mẫu để quản lý cách gửi dữ liệuSử dụng đối tượng này được trình bày chi tiết trong Sử dụng Đối tượng FormData, nhưng đây là hai ví dụ Sử dụng một đối tượng FormData độc lập
Bạn nên làm quen với mẫu HTML đó. Bây giờ cho JavaScript
Đây là kết quả trực tiếp Sử dụng FormData được liên kết với một phần tử biểu mẫuBạn cũng có thể liên kết một đối tượng 4 với một phần tử 6. Điều này tạo ra một đối tượng 4 đại diện cho dữ liệu có trong biểu mẫuHTML là điển hình
Nhưng JavaScript chiếm lấy hình thức
Đây là kết quả trực tiếp Bạn thậm chí có thể tham gia nhiều hơn vào quy trình bằng cách sử dụng thuộc tính 5 của biểu mẫu để nhận danh sách tất cả các thành phần dữ liệu trong biểu mẫu và quản lý từng thành phần dữ liệu theo cách thủ công. Để tìm hiểu thêm về điều đó, hãy xem ví dụNếu bạn sử dụng một đối tượng 4 với biểu mẫu bao gồm các tiện ích con 7, dữ liệu sẽ được xử lý tự động. Nhưng để gửi dữ liệu nhị phân bằng tay, còn nhiều việc phải làmCó nhiều nguồn dữ liệu nhị phân, bao gồm 8, 9 và WebRTC. Thật không may, một số trình duyệt cũ không thể truy cập dữ liệu nhị phân hoặc yêu cầu cách giải quyết phức tạp. Để tìm hiểu thêm về API 8, hãy xem Sử dụng tệp từ các ứng dụng webCách ít phức tạp nhất để gửi dữ liệu nhị phân là sử dụng phương pháp 2 của 4, được trình bày ở trên. Nếu phải làm thủ công thì phức tạp hơnTrong ví dụ sau, chúng tôi sử dụng API 8 để truy cập dữ liệu nhị phân và sau đó xây dựng yêu cầu dữ liệu biểu mẫu nhiều phần bằng tay
Như bạn thấy, HTML là một 6 tiêu chuẩn. Không có gì kỳ diệu xảy ra. "Ma thuật" là trong JavaScript
Đây là kết quả trực tiếp Tùy thuộc vào trình duyệt và loại dữ liệu bạn đang xử lý, việc gửi dữ liệu biểu mẫu qua JavaScript có thể dễ dàng hoặc khó khăn. Đối tượng 4 nói chung là câu trả lời và bạn có thể sử dụng một polyfill cho nó trên các trình duyệt cũ
Làm cách nào để gửi biểu mẫu AJAX trong JavaScript?Để gửi biểu mẫu qua AJAX, tập lệnh của bạn sẽ cần xử lý bốn tác vụ. . Chụp nút gửi biểu mẫu để hành động mặc định không diễn ra Nhận tất cả dữ liệu từ biểu mẫu bằng jQuery Gửi dữ liệu biểu mẫu bằng AJAX Hiển thị lỗi nếu có Làm cách nào để gửi biểu mẫu thông qua JavaScript?Khi chúng ta click vào link thì hàm submitForm() sẽ được thực thi. Hàm này sẽ lấy đối tượng phần tử bằng phương thức DOM getElementById() bằng cách chuyển id biểu mẫu cho phương thức này, sau đó biểu mẫu sẽ được gửi bằng cách sử dụng phương thức submit(). Thí dụ. Tạo một biểu mẫu và gửi nó bằng cách sử dụng phương pháp trên
Làm cách nào để gửi dữ liệu tệp và biểu mẫu bằng AJAX?Làm theo ba bước đơn giản sau. . Tạo biểu mẫu HTML. . mục lục. html. . Thêm thư viện JavaScript trên nền tảng đám mây. . Biểu mẫu HTML Trong thư mục gốc của bạn, hãy tạo một biểu mẫu HTML (một chỉ mục. html) bằng mã sau, chứa các trường để tải tệp lên. . Lưu ý những điều dưới đây. . Tập lệnh hỗ trợ AJAX trong JavaScript. . tập lệnh PHP Sự khác biệt giữa AJAX và gửi biểu mẫu là gì?Gửi biểu mẫu tiêu chuẩn sẽ gửi một yêu cầu HTTP mới (POST hoặc GET) và tải trang mới trong trình duyệt. Trong Ajax, dữ liệu được gửi đến máy chủ (POST hoặc GET) ở chế độ nền mà hoàn toàn không ảnh hưởng đến trang và phản hồi sau đó được javascript nhận ở chế độ nền, một lần nữa mà không ảnh hưởng đến trang |