jQuery Ajax Biểu mẫu gửi với Ví dụ về FormData – ví dụ ajax với dữ liệu

jquery ajax biểu mẫu gửi ví dụ | Trong hướng dẫn này, bạn sẽ học cách gửi dữ liệu nhiều phần, FormData hoặc nhiều tệp của biểu mẫu bằng cách sử dụng jquery ajax

Bạn đang xem: ví dụ ajax với dữ liệu

jQuery Ajax gửi biểu mẫu nhiều phần hoặc FormData; Trong tutorila này, bạn sẽ học cách gửi biểu mẫu bằng jquery ajax với dữ liệu nhiều phần hoặc FromData.

Trong hướng dẫn này, tìm hiểu cách gửi biểu mẫu jquery ajax với dữ liệu biểu mẫu từng bước. Một ví dụ jQuery Ajax đơn giản để chỉ cho bạn cách gửi biểu mẫu nhiều phần, sử dụng Javascript FormData $ .ajax () .

Nếu bạn sẽ bằng cách sử dụng Trình gửi biểu mẫu Ajax của jQuery, bạn có thể gửi dữ liệu biểu mẫu đến máy chủ mà không cần tải lại toàn bộ trang. Thao tác này sẽ 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.

Cách AJAX Gửi biểu mẫu trong jQuery

  • Tạo biểu mẫu HTML
  • jQuery Ajax Code

    < / li>

Câu hỏi thường gặp

  • Làm cách nào để thêm các trường hoặc dữ liệu bổ sung với dữ liệu Biểu mẫu trong jQuery ajax?
  • ajax FormData: Lệnh gọi bất hợp pháp
  • Làm cách nào để gửi nhiều phần / FormData hoặc tệp bằng jQuery.ajax?

Tạo biểu mẫu HTML

Trong bước này, chúng tôi sẽ tạo một biểu mẫu HTML cho nhiều tải lên tệp hoặc Dữ liệu biểu mẫu và một trường bổ sung.

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; title & gt; jQuery Ajax Biểu mẫu Gửi với Ví dụ về Dữ liệu Biểu mẫu & lt; / title & gt;
& lt; body & gt;

& lt; h1 & gt; jQuery Biểu mẫu Ajax Gửi với Ví dụ về Dữ liệu Biểu mẫu & lt; / h1 & gt;

& lt; form method = "POST" enctype = "Multiart / form-data" id = "myform" & gt;
    & lt; input type = "text" name = "title" / & gt; & lt; br / & gt; & lt; br / & gt;
    & lt; input type = "file" name = "files" / & gt; & lt; br / & gt; & lt; br / & gt;
    & lt; input type = "submit" value = "Gửi" id = "btnSubmit" / & gt;
& lt; / form & gt;

& lt; h1 & gt; jQuery Ajax Kết quả Biểu mẫu Đăng & lt; / h1 & gt;

& lt; span id = "đầu ra" & gt; & lt; / span & gt;

& lt; script src = "https://code.jquery.com/jquery-3.4.1.min.js" & gt; & lt; / script & gt;

& lt; / body & gt;
& lt; / html & gt;

Mã jQuery Ajax

Trong bước này, chúng tôi sẽ viết mã jquery ajax để gửi dữ liệu biểu mẫu đến máy chủ.

 $ (tài liệu) .ready (function () {

    $ ("# btnSubmit"). click (function (event) {

        // dừng gửi biểu mẫu, chúng tôi sẽ đăng nó theo cách thủ công.
        event.preventDefault ();

        // Lấy biểu mẫu
        var form = $ ('# myform') [0];

       // Tạo một đối tượng FormData
        var data = new FormData (biểu mẫu);

       // Nếu bạn muốn thêm một trường bổ sung cho FormData
        data.append ("CustomField", "Đây là một số dữ liệu bổ sung, đang thử nghiệm");

       // vô hiệu hóa nút gửi
        $ ("# btnSubmit"). prop ("bị vô hiệu hóa", true);

        $ .ajax ({
            gõ: "ĐĂNG",
            enctype: 'multiart / form-data',
            url: "/upload.php",
            data: dữ liệu,
            processData: false,
            contentType: false,
            cache: false,
            thời gian chờ: 800000,
            thành công: hàm (dữ liệu) {

                $ ("# đầu ra"). text (dữ liệu);
                console.log ("THÀNH CÔNG:", dữ liệu);
                $ ("# btnSubmit"). prop ("bị vô hiệu hóa", sai);

            },
            error: function (e) {

                $ ("# đầu ra"). text (e.responseText);
                console.log ("LỖI:", e);
                $ ("# btnSubmit"). prop ("bị vô hiệu hóa", sai);

            }
        });

    });

});

Câu hỏi thường gặp – Gửi biểu mẫu jQuery Ajax

Xem các câu hỏi thường gặp sau đây về Gửi biểu mẫu jQuery Ajax;

< / p>

1. Làm cách nào để thêm các trường bổ sung với dữ liệu Biểu mẫu trong jQuery ajax?

Phương thức append () của FormData gắn giá trị mới vào khóa hiện có bên trong đối tượng FormData hoặc thêm khóa nếu nó chưa tồn tại.

 // Tạo đối tượng FormData
        var data = new FormData (biểu mẫu);

// Nếu bạn muốn thêm một trường bổ sung cho FormData
        data.append ("CustomField", "Đây là một số dữ liệu bổ sung, đang thử nghiệm");

2. ajax FormData: Lời gọi bất hợp pháp

jQuery cố gắng chuyển đổi đối tượng FormData của bạn thành một chuỗi, hãy thêm đối tượng này vào lệnh gọi $ .ajax của bạn:

 processData: false,
contentType: false

3. Cách gửi nhiều phần / FormData hoặc tệp bằng jQuery.ajax?

Trong bước này, bạn sẽ học cách gửi nhiều tệp bằng jQuery ajax. Hãy xem đoạn mã dưới đây Snippet:

 var data = new FormData ();
jQuery.each (jQuery ('# tệp') [0] .files, function (i, file) {
    data.append ('file -' + i, file);
});

$ .ajax ({
    url: 'upload.php',
    data: dữ liệu,
    cache: false,
    contentType: false,
    processData: false,
    phương thức: 'POST',
    thành công: hàm (dữ liệu) {
      console.log ('thành công');
    }
});

Lưu ý

Kết luận

hướng dẫn biểu mẫu jquery ajax; bạn đã học cách gửi hoặc gửi dữ liệu biểu mẫu hoặc biểu mẫu nhiều phần bằng cách sử dụng jquery ajax trên máy chủ. Ngoài ra, bạn đã biết các truy vấn liên quan của biểu mẫu jquery ajax.

Hướng dẫn jQuery được đề xuất

Nếu bạn có bất kỳ câu hỏi hoặc suy nghĩ nào muốn chia sẻ, hãy sử dụng biểu mẫu bình luận bên dưới để liên hệ với chúng tôi.


Xem thêm những thông tin liên quan đến chủ đề ví dụ ajax với dữ liệu

Ví dụ về jQuery, Ajax và JSON

  • Tác giả: Lê Anh Tuấn
  • Ngày đăng: 2012-06-04
  • Đánh giá: 4 ⭐ ( 1150 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mình chỉ giới thiệu những cái cơ bản về JSON và jQuery, bạn nào thắc mắc gì thì vui lòng post tại đây, mình sẽ giải đáp.

Ví dụ ứng dụng AJAX

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 4287 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để minh họa chi tiết hơn, chương này mình sẽ cung cấp một ví dụ về một ứng dụng AJAX đơn giản, sau đó giải thích chi tiết các hoạt động xảy ra trong ứng dụng AJAX này.

AJAX là gì? Cách sử dụng Ajax tối ưu nhất cho website - Trung tâm hỗ trợ kỹ thuật

  • Tác giả: wiki.matbao.net
  • Đánh giá: 4 ⭐ ( 5148 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX là gì? Là chữ viết tắt của Asynchronous JavaScript and XML, AJAX = Asynchronous JavaScript and XML giúp tạo web động mà không cần reload

Một số ví dụ sử dụng Ajax

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 8009 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Định nghĩa về ajax AJAX viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ).

AJAX Là gì? Cách thức hoạt động và lợi ích mà nó mang lại

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 1021 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web. Ajax là một thuật ngữ chung cho các kỹ thuật Javascript khác nhau được sử dụng để kết nối với máy chủ web tự động mà không nhất thiết phải tải lại trang. AJAX là viết tắt của cụm từ Asynchronous Javascript and XML.

Bài 3: Phương thức GET trong Jquery Ajax

  • Tác giả: vi-magento.com
  • Đánh giá: 4 ⭐ ( 3812 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngoài phương thức POST ra còn có các khác nữa để có thể sử dụng Ajax. Và trong bài viết này mình sẽ giới thiệu về phương thức GET trong Jquery Ajax.

Sử dụng ajax để hiện dữ liệu từ database

  • Tác giả: longnv.name.vn
  • Đánh giá: 5 ⭐ ( 3639 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng ajax để hiện dữ liệu từ database hướng dẫn tạo request bằng javascript tới server để lấy dữ liệu về mà không cần nạp trang lại.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách Căn trái, Phải & Căn giữa Văn bản trong HTML - cách căn chỉnh văn bản ở giữa html