Tôi sẽ sử dụng jQuery như thế nào để ajaxify một biểu mẫu?

Question

Tôi đang cố gắng để AJAXIFY một biểu mẫu mà không cần sử dụng các plugin jQuery. Quá trình thực hiện điều này là gì. Tôi có mẫu của tôi. Tôi nên đặt hành động thành gì? Tập lệnh tiêu đề nên là gì? Hãy nhớ rằng tôi không muốn sử dụng bất kỳ plugin nào. Tôi chỉ cần một thuật toán cơ bản cho các hình thức ajaxifying bằng cách sử dụng jquery.

Answer 1

Hành động phải là whatever it would be if you weren't using JavaScript.

NB: Các liên kết bên dưới tất cả đi đến phần liên quan của tài liệu jQuery)

Sau đó, bạn sẽ bind a function to the submit trường hợp serialized các dữ liệu mẫu và sử dụng mà phải thực hiện một Ajax request (có lẽ reading the URI from the action attribute). Nó sẽ phải prevent the default action để gửi sự kiện.

Tôi tin rằng jQuery đặt tiêu đề HTTP X-Requested-With. Vì vậy, bạn chỉ cần sửa đổi quy trình phía máy chủ của bạn để trả về dữ liệu khác nhau nếu có (với giá trị phù hợp). Điều này có thể đơn giản như chỉ chuyển sang một chế độ xem khác (nếu bạn đang sử dụng mẫu MVC).

Answer 2

Điều đó tùy thuộc. Nếu bạn chỉ muốn gửi giá trị của bạn mà không cần tải lại trang, tôi đề nghị bạn ràng buộc nộp hợp các hình thức để một chức năng như vậy

jQuery('form#myForm').bind(submitValues); 

Sau này, sau đó bạn sẽ thiết lập các chức năng

function submitValues() { 
    //do stuff here 
    jQuery.ajax({ 
     //your ajax parameters here 
    }); 

    //this is important to cancel the default action on submit (ergo. go to the address as defined in action 
    return false; 
} 

Để biết thêm thông tin về lệnh ajax, hãy xem here

Answer 3

Phương pháp đơn giản nhất là sử dụng phương thức $ .load().

$ .load (hành động, dữ liệu, gọi lại)

Hành động có thể là tập lệnh PHP, trang ASP hoặc đơn giản là một trang web khác. Nếu dữ liệu là null, nó thực hiện một GET. Nếu không, nó sẽ thực hiện POST. Phương thức gọi lại được thực hiện khi phương thức hoàn tất (không nhất thiết phải thành công).

http://docs.jquery.com/Ajax/load

Ví dụ:

<form> 
    $.load("scripts/processOrder.php", { item: itemID, quantity: ordered }, function { 
     window.location.href = "orderComplete.htm"; 
    }); 
</form> 

Khi biểu mẫu được gửi, kịch bản processOrder được thực hiện với ItemID và ra lệnh cho đối số được truyền dưới dạng dữ liệu. Khi tập lệnh kết thúc, trình duyệt sẽ điều hướng đến trang orderComplete để hiển thị chế độ hoặc hiển thị trạng thái bổ sung.

Nếu bạn muốn kiểm soát nhiều hơn đối với Ajaxification, bạn có thể sử dụng các phương thức $ .get, $ .post hoặc $ .ajax.