Có sự kiện tải trên trình duyệt chéo khi nhấp vào nút quay lại không?

1. Giới thiệu Ajax

Nếu muốn chuyển đổi 1 phần tử trên website, tôi bắt buộc gửi một request bắt đầu mang đến hệ thống cùng nó sẽ trả về response với tổng thể văn bản của trang bao hàm bộ phận cơ mà tôi mong mỏi update nội dung mới. Bởi vậy, trình chu đáo đề nghị cài đặt lại cả trang, trong những lúc tôi chỉ ao ước cập nhật một phần tử tuyệt nhất.

Bạn đang xem: Có sự kiện tải trên trình duyệt chéo khi nhấp vào nút quay lại không?

AJAX là trường đoản cú viết tắt của Asynchronous JavaScript & XML sẽ giúp đỡ hạn chế nhược điểm đó. Thay vì chưng phải cài đặt lại trang nhằm cập nhật một trong những phần tử HTML, ta chỉ tải văn bản cần được cập nhật nhưng mà thôi. Ajax chưa hẳn là ngôn ngữ mà là kĩ thuật vào Javascript, góp chúng ta tạo thành các ứng dụng Web Không đồng điệu (Asynchronous). Nói dễ hiểu hơn là kỹ năng “load tài liệu không cần load lại trang” giỏi “load 1 phần website”, giúp trang web linc hoạt, gấp rút cùng thân mật với người dùng rộng.

2. Dùng jquery cho Ajax

a. Phương thơm thức

Một số method ajax trong jquery:

STTPmùi hương thứcMiêu tả
1.jQuery.ajax( options )Tải một trang tự xa do áp dụng một HTTP Request
2 .jQuery.ajaxSetup( options )Setup những thiết lập cấu hình global cho AJAX Request
3.jQuery.get( url, , , )Tải một trang tự xa vày sử dụng một HTTPhường GET Request
4.jQuery.post( url, , , )Tải một trang trường đoản cú xa bởi vì áp dụng một HTTP POST request.

Xem thêm: Cách Kết Nối Iphone Với Máy Tính Qua Wifi Không Cần Dùng Dây Cáp

5.load( url, , )Tải HTML xuất phát từ 1 tệp tin trường đoản cú xa với inject nó vào vào DOM.
6.serialize( )Sắp xếp theo vật dụng trường đoản cú một tập vừa lòng các phần tử input vào trong một chuỗi dữ liệu
7.serializeArray( )Xếp theo lắp thêm từ bỏ tất cả Form cùng thành phần Form như cách làm .serialize() tuy thế trả về một cấu tạo tài liệu JSON nhằm chúng ta thao tác cùng với nó.

b. Sự kiện

Một số sự kiện Ajax trong jquery:1 - ajaxStart( callbaông xã ) : Đăng kí một hàm và để được thực thi bất cứ bao giờ một AJAX Request bắt đầu cùng không có chuyển động như thế nào sẵn sàng chuẩn bị.2 - ajaxComplete( callbachồng ) : Đăng kí một hàm sẽ được xúc tiến bất kể khi nào một AJAX Request hoàn thành.3 - ajaxError( callback ): Đăng kí một hàm sẽ được thực hiện bất kể lúc nào một AJAX Request thất bại).4 - ajaxSend( callbaông xã ): Đăng kí một hàm sẽ được thực thi trước lúc một AJAX Request được gửi.5 - ajaxStop( callbaông xã ) : Đăng kí một hàm sẽ được triển khai bất cứ lúc nào tất cả AJAX Request vẫn xong.6 - ajaxSuccess( callbaông chồng ): Đính kèm một hàm và để được thực thi bất kể khi nào một AJAX Request chấm dứt thành công xuất sắc.Các bạn cũng có thể xem thêm không thiếu tại: http://api.jquery.com/category/ajax/

3. Tích thích hợp Ajax vào Rails

Để ban đầu với ajax bản thân cùng các bạn sẽ thực hiện một app ToDo cơ phiên bản bởi rails qua công việc sau:

Tạo một phầm mềm mớinew todo_appGenerate resuourerails g resource tovày mô tả tìm kiếm : text priority : textApp controller

class TodosController Tạo một form dễ dàng và đơn giản cho TODOMy Todos
Tạo partial _tobởi đến từng todo

priority:

Tạo mới tovày bằng ajax

Bây giờ đồng hồ chúng ta đang bắt đầu "ajaxify" quá trình chế tạo tovày. Các bạn có thể thêm một tệp tin javascript trên app/assets/javascripts. Quá trình tạo thành bắt đầu một tobởi Lúc người tiêu dùng cliông chồng tạo nên, chúng ta sẽ nhiều loại mặc kệ định submit form của rails với sẽ gửi ajax sửa chữa.Tạo một cliông chồng listener:

$(function() $("form").submit(function(event) // loại bất chấp định của sự kiện submit event.preventDefault(); // Đặt thử một debug giúp thấy sự kiện hit debugger; ););Quý Khách hãy bật server và điền đọc tin vào size kế tiếp nhảy console của trình ưng chuẩn và click vào button sinh sản một tobởi vì.

*
Tất nhiên là bọn họ cũng cần quan tâm cho tới dữ liệu truyền rằng sau khoản thời gian nhận submit khung này. Tại màn hình hiển thị console của trình cẩn thận bạn sẽ thấy thẻ form bao gồm sẵn các action cùng method mang định được gửi html.erb form_for. Hãy thử áp dụng lênh .attr để mang chúng
*
Nếu các bạn msinh sống tiếp thẻ khung ra vẫn thấy các div nằm trong những số đó, Thật hoàn hảo những dữ liệu của chúng ta phần đa xuất hiện trong số div này và bao gồm sẵn id họ chỉ cẫn Hotline .val() để đưa ra
*
Bây giờ thì bài toán viết ajax mang đến form này trở buộc phải thật dễ dàng

$(function() $("form").submit(function(event) sự kiện.preventDefault(); var action = $(this).attr("action"); var method = $(this).attr("method"); var description = $(this).find("#todo_description").val(); var priority = $(this).find("#todo_priority").val(); $.ajax( method: method, url: action, data: description: mô tả tìm kiếm, priority: priority dataType: "script" ); ););Thế là request bây chừ đã đứng vững respone.Trờ về với create controller trên hệ thống bọn họ sẽ thấy code là sẽ tạo ra một tobởi với param và redirect_lớn về root. Nhưng khi sử dụng ajax thì đâu chỉ redirect. Mặc định reponses được gởi là html string nên trước kia ta bao gồm thêm dataType: "script" vào js

def create Tobởi.create(todo_params) respond_to lớn vì chưng |format| # nếu như response fomat là html, redirect nhỏng bình thường format.html redirect_to root_path #Nếu response format là javascripts, .... format.js endendlúc tất cả format.js Rails vẫn auto tìm kiếm tìm app/views//.js.erb trong ngôi trường thích hợp này là app/views/todos/create.js.erb. Tạo ra file và thêm vào tovì mới

var html = "priority: ";$("ul").append(html);Và họ sẽ xong xuôi tạo thành new cùng với ajax vào rails.

*
Cảm ơn chúng ta đã xem