Các ứng dụng web thông thường truyền thông tin đến và từ máy chủ bằng cách sử dụng các yêu cầu đồng bộ, có nghĩa là chúng tôi điền vào biểu mẫu, nhấn gửi và được chuyển đến một trang mới với thông tin mới từ máy chủ Show Nói cách khác, ứng dụng web cần chuyển dữ liệu từ phía máy khách sang các phương thức phía máy chủ để nhận phản hồi từ máy chủ. jQuery chỉ là một cách đơn giản để đạt được điều này. Chúng tôi có thể sử dụng các thư viện hoặc khung phía máy khách khác như AngularJS để POST dữ liệu lên ứng dụng web python Tuy nhiên, với AJAX, khi chúng tôi nhấn gửi, những điều sau sẽ xảy ra
AXJS(JavaScript và XML không đồng bộ) là Không đồng bộ, vì vậy người dùng có thể tiếp tục sử dụng ứng dụng trong khi chương trình máy khách yêu cầu thông tin từ máy chủ ở chế độ nền Chúng tôi sẽ sử dụng virtualenvwrapper k@laptop:~$ mkvirtualenv venv New python executable in /home/k/Envs/venv1/bin/python Installing setuptools, pip, wheel...done. (venv) k@laptop:~$ cài đặt bình $ pip install Flask ... Successfully installed Flask-0.11.1 Jinja2-2.8 MarkupSafe-0.23 Werkzeug-0.11.11 click-6.6 itsdangerous-0.24 Chúng ta sẽ bắt đầu từ ứng dụng đơn giản from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run()
 Đây là danh sách các tệp của chúng tôi được sử dụng trong hướng dẫn này Trang đăng ký - sign Up. html Chúng tôi có thể muốn tạo một trang Đăng ký có tên là mẫu/đăng ký. html bằng Bootstrap để cấp nguồn cho các tệp html của chúng tôi
SignUp Template for Bootstrap
Chúng ta cần thêm một phương thức python có tên signUp để xử lý yêu cầu và hiển thị tệp html tương ứng. Chúng tôi sử dụng render_template để hiển thị trang đăng ký theo yêu cầu /signUp. Chúng tôi trả lại mẫu được hiển thị dưới dạng phản hồi from flask import Flask, render_template, request, json
app = Flask(__name__)
@app.route('/')
def hello():
return "Hello World!"
@app.route('/signUp')
def signUp():
return render_template('signUp.html')
if __name__=="__main__":
app.run()
Bây giờ chúng ta sẽ sử dụng jQuery AJAX để đăng dữ liệu biểu mẫu lên phương thức Python Flask Vì vậy, hãy tạo một tệp JavaScript mới có tên signUp. js và đưa nó vào sau jQuery trong signUp. html ... trong kịch bản. js, chúng tôi sẽ đính kèm một sự kiện nhấp chuột khi nhấp vào nút và gọi phương thức python bằng jQuery AJAX. Chúng tôi sẽ tuần tự hóa dữ liệu biểu mẫu bằng cách sử dụng $form. serialize() và đăng nó lên phương thức python, /signUpUser $(function(){
$('button').click(function(){
var user = $('#inputUsername').val();
var pass = $('#inputPassword').val();
$.ajax({
url: '/signUpUser',
data: $('form').serialize(),
type: 'POST',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
});
});
/signUpUser phương thức trong ứng dụng. py Bây giờ, hãy thêm phương thức python signUpUser() để nhận dữ liệu từ phía máy khách from flask import Flask,render_template, request,json
app = Flask(__name__)
@app.route('/')
def hello():
return "Hello World!"
@app.route('/signUp')
def signUp():
return render_template('signUp.html')
@app.route('/signUpUser', methods=['POST'])
def signUpUser():
user = request.form['username'];
password = request.form['password'];
return json.dumps({'status':'OK','user':user,'pass':password});
if __name__=="__main__":
app.run()
Ở đây, để truy xuất các tham số đã đăng, chúng tôi đã sử dụng mô-đun yêu cầu. Chúng tôi cũng đã sử dụng mô-đun json để trả lại dữ liệu json cho phía máy khách. json. kết xuất trả lại json cho phía máy khách 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 ________số 8_______ Một phương pháp khác là sử dụng API Thư viện AJAX của Google để tải jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</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> $SCRIPT_ROOT = {{ request.script_root|tojson }}; </script> Hàm xem JSONBâ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 HTMLchỉ mục của bạn. mẫu html phải mở rộng mẫu <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</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 ( <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</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 <script> $(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; }); }); </script> <h1>jQuery Example</h1> <p><input type=text size=5 name=a> + <input type=text size=5 name=b> = <span id=result>?</span> <p><a href=# id=calculate>calculate server side</a> 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
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 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</script>7 và <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</script>8 jQuery tương đương với Python là gì?Không có . Jquery là một thư viện javascript. Về cơ bản, nó là một loạt các lệnh javascript đơn giản ánh xạ tới các lệnh javascript vụng về hơn. Vì vậy, thay vì tài liệu.
Tôi có thể tích hợp JavaScript với Python không?JS2PY hoạt động bằng cách dịch trực tiếp JavaScript sang Python . Nó chỉ ra rằng bạn có thể chạy JS trực tiếp từ mã Python mà không cần cài đặt các công cụ lớn bên ngoài như V8. Để sử dụng mô-đun, trước tiên mô-đun phải được cài đặt vào hệ thống, vì mô-đun không được tích hợp sẵn. Để sử dụng mô-đun, nó phải được nhập.
Tôi có thể sử dụng jQuery với Django không?Bên trong cài đặt của bạn. py đảm bảo rằng django. đóng góp. các tệp tĩnh nằm trong INSTALLED_APPS (theo mặc định, nó ở đó). Và bây giờ bạn có thể sử dụng jQuery trên toàn bộ trang web của mình .
Làm cách nào để kết nối js với Python?Đã liên kết . Thực thi tập lệnh python khi nhấp vào nút -4. Gửi dữ liệu JSON đến giao diện người dùng trong Flask Khởi chạy tập lệnh python từ nút html mà không quay lại -2. Kết nối Javascript với python |
