jQuery là một thư viện JavaScript nhỏ thường được sử dụng để đơn giản hóa việc làm việc với DOM và JavaScript nói chung. Nó là công cụ hoàn hảo để làm cho các ứng dụng web năng động hơn bằng cách trao đổi JSON giữa máy chủ và máy khách
Bản thân JSON là một định dạng vận chuyển rất nhẹ, rất giống với cách các nguyên hàm Python [số, chuỗi, ký tự và danh sách] trông giống như được hỗ trợ rộng rãi và rất dễ phân tích cú pháp. Nó đã trở nên phổ biến cách đây vài năm và nhanh chóng thay thế XML làm định dạng truyền tải trong các ứng dụng web
Đang tải jQuery
Để sử dụng jQuery, trước tiên bạn phải tải xuống và đặt nó vào thư mục tĩnh của ứng dụng của bạn, sau đó đảm bảo rằng nó đã được tải. Lý tưởng nhất là bạn có một mẫu bố cục được sử dụng cho tất cả các trang mà bạn chỉ cần thêm một câu lệnh script vào cuối để tải jQuery
Một phương pháp khác là sử dụng API Thư viện AJAX của Google để tải jQuery
window.jQuery || document.write['\x3C/script>']
Trong trường hợp này, bạn phải đặt jQuery vào thư mục tĩnh của mình dưới dạng dự phòng, nhưng trước tiên, nó sẽ thử tải trực tiếp từ Google. Điều này có lợi là trang web của bạn có thể sẽ tải nhanh hơn cho người dùng nếu họ đã truy cập ít nhất một trang web khác trước khi sử dụng cùng một phiên bản jQuery từ Google vì phiên bản này đã có trong bộ đệm của trình duyệt
Trang web của tôi ở đâu?
Bạn có biết ứng dụng của bạn ở đâu không? . nó nằm trên cổng localhost gì đó và trực tiếp trên thư mục gốc của máy chủ đó. Nhưng nếu sau đó bạn quyết định chuyển ứng dụng của mình sang một vị trí khác thì sao?
Một phương pháp đơn giản là thêm thẻ script vào trang của chúng tôi để đặt biến toàn cục thành tiền tố cho thư mục gốc của ứng dụng. Một cái gì đó như thế này
$SCRIPT_ROOT = {{ request.script_root|tojson }};
Hàm xem JSON
Bây giờ, hãy tạo một chức năng phía máy chủ chấp nhận hai đối số URL của các số sẽ được cộng lại với nhau và sau đó gửi lại ứng dụng trong một đối tượng JSON. Đây là một ví dụ thực sự lố bịch và là điều bạn thường làm ở phía máy khách, nhưng dù sao đây cũng là một ví dụ đơn giản cho thấy bạn sẽ sử dụng jQuery và Flask như thế nào
from flask import Flask, jsonify, render_template, request app = Flask[__name__] @app.route['/_add_numbers'] def add_numbers[]: a = request.args.get['a', 0, type=int] b = request.args.get['b', 0, type=int] return jsonify[result=a + b] @app.route['/'] def index[]: return render_template['index.html']
Như bạn có thể thấy, tôi cũng đã thêm một phương thức chỉ mục ở đây để hiển thị một mẫu. Mẫu này sẽ tải jQuery như trên và có một biểu mẫu nhỏ để chúng ta có thể thêm hai số và liên kết để kích hoạt chức năng ở phía máy chủ
Lưu ý rằng chúng tôi đang sử dụng phương pháp ở đây sẽ không bao giờ thất bại. Nếu khóa bị thiếu, giá trị mặc định [ở đây là 0
] được trả về. Hơn nữa, nó có thể chuyển đổi các giá trị thành một loại cụ thể [như trong trường hợp của chúng tôi là int]. Điều này đặc biệt hữu ích đối với mã được kích hoạt bởi tập lệnh [API, JavaScript, v.v. ] vì bạn không cần báo cáo lỗi đặc biệt trong trường hợp đó
HTML
chỉ mục của bạn. mẫu html phải mở rộng mẫu
window.jQuery || document.write['\x3C/script>']0 với jQuery được tải và bộ biến $SCRIPT_ROOT hoặc thực hiện điều đó ở trên cùng. Đây là mã HTML cần thiết cho ứng dụng nhỏ của chúng ta [
window.jQuery || document.write['\x3C/script>']1]. Lưu ý rằng chúng tôi cũng thả tập lệnh trực tiếp vào HTML tại đây. Nó thường là một ý tưởng tốt hơn để có nó trong một tập lệnh riêng biệt
$[function[] { $['a#calculate'].bind['click', function[] { $.getJSON[$SCRIPT_ROOT + '/_add_numbers', { a: $['input[name="a"]'].val[], b: $['input[name="b"]'].val[] }, function[data] { $["#result"].text[data.result]; }]; return false; }]; }]; jQuery Example + = ? calculate server side
Tôi sẽ không đi vào chi tiết ở đây về cách thức hoạt động của jQuery, chỉ giải thích rất nhanh về đoạn mã nhỏ ở trên
window.jQuery || document.write['\x3C/script>']
2 chỉ định mã sẽ chạy sau khi trình duyệt tải xong các phần cơ bản của trangwindow.jQuery || document.write['\x3C/script>']
3 chọn một phần tử và cho phép bạn thao tác trên phần tử đówindow.jQuery || document.write['\x3C/script>']
4 chỉ định chức năng sẽ chạy khi người dùng nhấp vào phần tử. Nếu hàm đó trả về false, hành vi mặc định sẽ không bắt đầu [trong trường hợp này, hãy điều hướng đến # URL]window.jQuery || document.write['\x3C/script>']
5 gửi yêu cầuwindow.jQuery || document.write['\x3C/script>']
6 tới url và sẽ gửi nội dung của đối tượng dữ liệu dưới dạng tham số truy vấn. Khi dữ liệu đến, nó sẽ gọi hàm đã cho với giá trị trả về làm đối số. Lưu ý rằng chúng ta có thể sử dụng biến $SCRIPT_ROOT ở đây mà chúng ta đã đặt trước đó
Kiểm tra nguồn ví dụ để biết ứng dụng đầy đủ thể hiện mã trên trang này, cũng như điều tương tự bằng cách sử dụng
window.jQuery || document.write['\x3C/script>']7 và
window.jQuery || document.write['\x3C/script>']8