Gửi yêu cầu http POST không đồng bộ để tải dữ liệu từ máy chủ. Dạng chung của nó là: jQuery.post (url [, data] [, success] [, dataType]) * url: là tham số bắt buộc duy nhất. Chuỗi này chứa địa chỉ để gửi

Bạn đang xem: đăng ví dụ về jquery ajax

Gửi yêu cầu http POST không đồng bộ để tải dữ liệu từ máy chủ. Dạng chung của nó là:

  jQuery.post (url [, data] [, success] [, dataType])  
  • url: là tham số bắt buộc duy nhất. Chuỗi này chứa địa chỉ để gửi yêu cầu. Dữ liệu trả về sẽ bị bỏ qua nếu không có tham số nào khác được chỉ định
  • dữ liệu: Một đối tượng hoặc chuỗi thuần túy được gửi đến máy chủ cùng với yêu cầu.
  • thành công: Một hàm gọi lại được thực thi nếu yêu cầu thành công. nó lấy dữ liệu trả về làm đối số. Nó cũng được chuyển sang trạng thái văn bản của phản hồi.
  • dataType: Loại dữ liệu được mong đợi từ máy chủ. Mặc định là Intelligent Guess (xml, json, script, text, html). nếu tham số này được cung cấp thì lệnh gọi lại thành công cũng phải được cung cấp.

Ví dụ

  $ .post ('http://example.com/form.php', {category: 'client', type: 'premium'});  

yêu cầu form.php từ máy chủ, gửi dữ liệu bổ sung và bỏ qua kết quả trả về

  $ .post ('http: // example.com/form.php ', {category:' client ', type:' premium '}, function (response) {
      alert ("thành công");
      $ ("# mypar"). html (response.amount);
});  

yêu cầu form.php từ máy chủ, gửi dữ liệu bổ sung và xử lý phản hồi được trả về (định dạng json). Ví dụ này có thể được viết ở định dạng sau:

  $ .post ('http://example.com/form.php', {category: 'client' , type: 'premium'}). done (function (response) {
      alert ("thành công");
      $ ("# mypar"). html (response.amount);
});  

Ví dụ sau đăng một biểu mẫu sử dụng Ajax và đặt kết quả trong một div

  & lt;! doctype html & gt ;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; title & gt; jQuery.post demo & lt; / title & gt;
  & lt; script src = "https://code.jquery.com/jquery-1.10.2.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
 
& lt; form action = "/" id = "searchForm" & gt;
  & lt; input type = "text" name = "s" placeholder = "Tìm kiếm ..." & gt;
  & lt; input type = "submit" value = "Tìm kiếm" & gt;
& lt; / form & gt;
& lt;! - kết quả tìm kiếm sẽ được hiển thị bên trong div - & gt;
& lt; div id = "kết quả" & gt; & lt; / div & gt;
 
& lt; script & gt;
// Đính kèm trình xử lý gửi vào biểu mẫu
$ ("#searchForm") .submit (function (event) {
 
  // Ngừng gửi biểu mẫu bình thường
  event.preventDefault ();
 
  // Nhận một số giá trị từ các phần tử trên trang:
  var $ form = $ (this),
    term = $ form.find ("input [name = 's']") .val (),
    url = $ form.attr ("hành động");
 
  // Gửi dữ liệu bằng bài đăng
  var đăng = $ .post (url, {s: term});
 
  // Đặt kết quả vào một div
  post.done (chức năng (dữ liệu) {
    var content = $ (data) .find ("#content");
    $ ("#result") .empty (). append (nội dung);
  });
});
& lt; / script & gt;
 
& lt; / body & gt;
& lt; / html & gt;  

Ví dụ sau sử dụng github api để tìm nạp danh sách các kho của người dùng bằng jQuery.ajax () và đặt kết quả vào một div

 & lt;! doctype html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; title & gt; jQuery Tải bản demo & lt; / title & gt;
  & lt; script src = "https://code.jquery.com/jquery-1.10.2.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
 
& lt; form id = "userForm" & gt;
  & lt; input type = "text" name = "username" placeholder = "Nhập gitHub Tên người dùng" & gt;
  & lt; input type = "submit" value = "Tìm kiếm" & gt;
& lt; / form & gt;
& lt;! - kết quả tìm kiếm sẽ được hiển thị bên trong div - & gt;
& lt; div id = "kết quả" & gt; & lt; / div & gt;
 
& lt; script & gt;
// Đính kèm trình xử lý gửi vào biểu mẫu
$ ("#userForm") .submit (function (event) {
 
  // Ngừng gửi biểu mẫu bình thường
  event.preventDefault ();
 
  // Nhận một số giá trị từ các phần tử trên trang:
  var $ form = $ (this),
    username = $ form.find ("input [name = 'username']") .val (),
    url = "https://api.github.com/users/"+username+"/repos";
 
  // Gửi dữ liệu bằng bài đăng
  var đăng = $ .post (url, {s: term});
 
  // Hàm Ajax để gửi một yêu cầu nhận
  $ .ajax ({
    gõ: "GET",
    url: url,
    dataType: "jsonp"
    thành công: hàm (phản hồi) {
        // nếu yêu cầu nếu được thực hiện thành công thì phản hồi đại diện cho dữ liệu

        $ ("#result") .empty (). append (phản hồi);
    }
  });
  
});
& lt; / script & gt;
 
& lt; / body & gt;
& lt; / html & gt;  

jQuery.ajax ()

$ .post ( url [, data] [, success] [, dataType]) là một hàm Ajax viết tắt, tương đương với:

  $. ajax ({
  gõ: "ĐĂNG",
  url: url,
  data: dữ liệu,
  thành công: thành công,
  dataType: dataType
});  

$ .ajax () cung cấp nhiều tùy chọn hơn có thể được tìm thấy tại đây

Xem Thêm  Cách tính Chiều rộng và Chiều cao của Cửa sổ bằng JavaScript? - chiều rộng cửa sổ kiểm tra javascript

Thông tin khác:

Để biết thêm thông tin, vui lòng truy cập trang web chính thức


Xem thêm những thông tin liên quan đến chủ đề đăng ví dụ về jquery ajax

AJAX with jQuery: A Simple Login Example

  • Tác giả: Shawn McCool
  • Ngày đăng: 2009-04-15
  • Đánh giá: 4 ⭐ ( 2831 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video looks much better on Vimeo. \r
    http://vimeo.com/4173282\r
    \r
    In this screencast we explore the jQuery $.post() command in order to create a simple ajax login script that also gracefully degrades and works for users who do not have JavaScript enabled.\r
    \r
    See more at http://shawnmccool.com

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

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 5792 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ộ).

Jquery ajax và một số ví dụ cơ bản

  • Tác giả: 123code.net
  • Đánh giá: 4 ⭐ ( 8820 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu Jquery ajax và một số ví dụ cơ bản để các bạn hiểu rõ hơn về nó. Cách sử dụng như thế nào

jQuery Ajax

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 5 ⭐ ( 7790 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jQuery là một công cụ tuyệt vời cung cấp một tập hợp các phương thức AJAX dồi dào để phát triển ứng dụng web.

Tìm hiểu jQuery Ajax

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 5904 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu jquery ajax và viết chương trình ajax đầu tiên. Học lập trình ajax với jquery library miễn phí, jquery cho newbie bắt đầu học lập trình web
Xem Thêm  Cách xóa cột khỏi bảng trong SQL - xóa cột khỏi bảng

Hướng dẫn cơ bản về jQuery AJAX

  • Tác giả: forum.vdevs.net
  • Đánh giá: 3 ⭐ ( 2849 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX là gì?. AJAX = Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ). Hiểu đơn giản, AJAX là cách thức tải nội dung trong nền (chạy ẩn) và hiển thị nó lên trang web mà không cần tải lại trang

Jquery Ajax là gì và cách sử dụng Ajax tối ưu

  • Tác giả: freelancervietnam.vn
  • Đánh giá: 5 ⭐ ( 8796 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

By ads_php