Hiển thị dữ liệu người dùng bằng Tìm nạp JavaScript: Hồ sơ và bài đăng
Một trường hợp sử dụng phổ biến cho khả năng tương tác API mạnh mẽ của JavaScript là truy xuất và hiển thị dữ liệu theo thời gian thực từ chương trình phụ trợ. Trong trường hợp này, bạn muốn trích xuất thông tin từ hai bảng được liên kết: một bảng liên quan đến bài đăng của người dùng và bảng còn lại liên quan đến hồ sơ của họ. Đây là một cách tiếp cận tuyệt vời để tìm hiểu cách hiển thị động một số tập dữ liệu trên trang web của bạn và xử lý chúng trong một lệnh gọi API.
các Tìm nạp API phải được sử dụng để truy xuất dữ liệu từ phần phụ trợ trước khi bạn có thể tiếp tục. JavaScript sẽ phân tích cú pháp Phản hồi JSON được trả về bởi API Python chứa hồ sơ và bài đăng. Bạn có thể hiển thị hồ sơ và thông tin bài viết một cách chính xác nếu biết cách làm việc với DOM bằng JavaScript.
Mặc dù việc này có vẻ khó khăn nhưng việc truy xuất dữ liệu từ một số bảng thực sự có thể thực hiện được nếu bạn biết phản hồi được cấu trúc như thế nào. Bạn phải xử lý các dữ liệu JSON và xây dựng các phần tử HTML để hiển thị nó sau khi gửi yêu cầu tìm nạp. Tạo danh sách hoặc phần cho hồ sơ người dùng và các bài đăng đi kèm với chúng là một phần của việc này.
Tôi sẽ đưa bạn qua một ví dụ thực tế trong hướng dẫn này sử dụng JavaScript để tải dữ liệu bài đăng và hồ sơ người dùng từ API Python. Cuối cùng, bạn sẽ hiểu cách hiển thị dữ liệu đã tìm nạp và đảm bảo dữ liệu đó xuất hiện phù hợp trên trang HTML của bạn.
| Yêu cầu | Ví dụ về sử dụng |
|---|---|
| fetch() | Để bắt đầu yêu cầu mạng truy xuất tài nguyên, hãy sử dụng lệnh này. Ở đây, nó được sử dụng để lấy bài đăng và hồ sơ người dùng thông qua điểm cuối API phụ trợ Python. |
| .then() | Một thủ tục để quản lý lời hứa trả về của hàm get(). Khi câu trả lời đã được truy xuất chính xác, quy trình xử lý dữ liệu sẽ được thực hiện bằng cách chuyển đổi nó thành JSON bằng hàm the.then(). |
| response.json() | Phần nội dung JSON của phản hồi được phân tích cú pháp bằng kỹ thuật này. Cần thiết để làm việc với các API cung cấp dữ liệu có định dạng JSON, như bài đăng và hồ sơ người dùng. |
| createElement() | Kỹ thuật DOM JavaScript này xây dựng phần tử HTML một cách linh hoạt. Xây dựng và hiển thị các thành phần như hồ sơ người dùng và đăng tài liệu được tạo từ dữ liệu thu được là hai mục đích sử dụng chính của nó. |
| append() | Các phần tử đã tạo sẽ được chèn làm phần tử con cuối cùng của nút cha đã chọn bằng phương thứcappend(). Kỹ thuật này được sử dụng để kết hợp các mục vào khung HTML, chẳng hạn như nút theo dõi, thông tin người dùng và bài đăng. |
| JsonResponse() | Lệnh Django này tạo ra phản hồi HTTP với dữ liệu được mã hóa bằng JSON. Điều cần thiết là gửi dữ liệu bài đăng và hồ sơ từ phần phụ trợ Python đến giao diện người dùng JavaScript để xử lý. |
| values() | Phương thức value() của Django tạo một đối tượng cho kết quả truy vấn giống với từ điển. Nó được sử dụng trong trường hợp này để có được các bài viết có liên quan đến một tác giả cụ thể. |
| Profile.DoesNotExist | Không thể tìm thấy hồ sơ được yêu cầu trong cơ sở dữ liệu, điều này dẫn đến việc đưa ra ngoại lệ dành riêng cho Django này. Nó đảm bảo rằng trong trường hợp không tìm thấy hồ sơ, API sẽ cung cấp lỗi 404 cùng với thông báo hữu ích. |
| TestCase | Các bài kiểm tra đơn vị trong Django được viết bằng lớp TestCase. Điều cần thiết là phải xác minh tính chính xác của API và đảm bảo rằng các bài đăng và dữ liệu hồ sơ được trả về theo cách mong muốn trong các điều kiện khác nhau. |
Hiểu tích hợp JavaScript và Python cho nội dung động
Các tập lệnh đi kèm cho thấy cách kết hợp giao diện người dùng JavaScript và phần phụ trợ Python theo cách dễ sử dụng nhưng hiệu quả. Một trang web có thể tải động dữ liệu bài đăng và hồ sơ người dùng nhờ sự tích hợp này. các tìm nạp API là phần chính của mã JavaScript; nó gửi yêu cầu đến phần phụ trợ và trả về phản hồi JSON. các sau đó() kỹ thuật kết hợp với các lời hứa cho phép tập lệnh đảm bảo tải dữ liệu không đồng bộ. Phương pháp này cải thiện trải nghiệm người dùng bằng cách giữ cho trình duyệt không bị treo trong khi chờ câu trả lời API.
Bằng cách sử dụng ID của người dùng, mã JavaScript sẽ thực hiện yêu cầu truy xuất tới API Python để trả về hồ sơ và dữ liệu bài đăng. Trước tiên, tập lệnh chuyển đổi câu trả lời thành JSON trước khi sửa đổi DOM để hiển thị hồ sơ và bài đăng. Nó thực hiện điều này bằng cách tạo ra các phần tử HTML như đoạn văn và mục danh sách. Ví dụ, mới được xây dựng div các phần tử cho tên người dùng, người theo dõi và người theo dõi được sử dụng để hiển thị dữ liệu hồ sơ. Mọi thông tin đều được thêm vào phần hồ sơ của trang sau khi được đặt vào cấu trúc HTML thích hợp.
Phần phụ trợ do Django xây dựng là điều cần thiết để đưa dữ liệu bài đăng và hồ sơ ra khỏi cơ sở dữ liệu. các JsonPhản hồi Hàm trong Python chuyển đổi dữ liệu thành JSON, đây là định dạng được đề xuất cho các API trực tuyến do tính chất nhẹ và dễ phân tích cú pháp của nó. các giá trị() phương pháp trong Django đảm bảo truy xuất hiệu quả các bài đăng ở định dạng từ điển. Theo cách này, giao diện người dùng sẽ dễ dàng xem qua các bài đăng và hiển thị động chúng trên trang web. các Hồ sơ.Không tồn tại ngoại lệ được tập lệnh sử dụng để xử lý các sự cố tiềm ẩn và đảm bảo cung cấp phản hồi phù hợp trong trường hợp không có dữ liệu.
Nhìn chung, trang web rất năng động và có thể thay đổi mà không cần tải lại toàn bộ trang nhờ sự kết hợp giữa Python và JavaScript. Chiến lược này hoạt động đặc biệt hiệu quả trên blog và các trang mạng xã hội nơi thông tin do người dùng tạo, bao gồm các bài đăng và hồ sơ, được cập nhật thường xuyên. Giải pháp trở thành mô-đun và dễ bảo trì bằng cách tuân thủ các phương pháp hay nhất và sắp xếp mã thành các chức năng riêng biệt. Ngoài ra, việc bao gồm các bài kiểm tra đơn vị đảm bảo rằng dữ liệu hồ sơ và bài đăng được trả về chính xác và API hoạt động như dự định. Điều này giúp các ứng dụng thời gian thực có thể tối ưu hóa hiệu suất và xử lý lỗi hiệu quả hơn.
Python và JavaScript để tìm nạp dữ liệu động cho hồ sơ và bài đăng của người dùng
Ý tưởng chính đằng sau phương pháp này là tải hồ sơ người dùng và bài đăng một cách linh hoạt bằng cách tích hợp giao diện JavaScript với phần phụ trợ API Python. Phương pháp này sử dụng khung Django cho Python trên phần phụ trợ và JavaScript tiêu chuẩn.
// JavaScript Code to Fetch and Display Profile and Postsfunction load_profile(author_id) {// Fetch profile and posts from the backendfetch(`/profile/${author_id}`).then(response => response.json()).then(response => {// Create a profile sectionconst content_profile = document.createElement('div');content_profile.className = "content_profile";const user = document.createElement('h3');user.innerHTML = response.prof.user;const followers = document.createElement('p');followers.innerHTML = `Followers: ${response.prof.followers}`;const following = document.createElement('p');following.innerHTML = `Following: ${response.prof.following}`;const followButton = document.createElement('button');followButton.className = "btn btn-primary";followButton.innerHTML = "Follow";content_profile.append(user, followers, following, followButton);document.querySelector('#profile').append(content_profile);// Display postsresponse.posts.forEach(post => {const postList = document.createElement('ul');const authorInfo = document.createElement('li');authorInfo.innerHTML = `${post.author} at ${post.timestamp} says:`;const content = document.createElement('li');content.innerHTML = post.content;const likes = document.createElement('li');likes.innerHTML = `${post.like} Likes`;postList.append(authorInfo, content, likes);document.querySelector('#postbox').append(postList);});}).catch(error => console.error('Error loading profile:', error));}
Chế độ xem API Python Django để cung cấp hồ sơ và dữ liệu đăng
Bảng Hồ sơ và Bài đăng là hai bảng có liên quan mà chế độ xem Python Django này lấy dữ liệu từ đó và trả về dưới dạng JSON để giao diện người dùng sử dụng.
from django.http import JsonResponsefrom .models import Profile, Postdef profile_view(request, author_id):try:# Fetch profile and posts dataprofile = Profile.objects.get(user_id=author_id)posts = Post.objects.filter(author_id=author_id).values()# Prepare the JSON responsereturn JsonResponse({'prof': {'user': profile.user.username,'followers': profile.followers.count(),'following': profile.following.count()},'posts': list(posts)})except Profile.DoesNotExist:return JsonResponse({'error': 'Profile not found'}, status=404)
Kiểm tra đơn vị cho Python Django View
Để đảm bảo dữ liệu được cung cấp phù hợp, bài kiểm tra đơn vị này xác minh rằng API Django lấy chính xác hồ sơ người dùng và bài đăng.
from django.test import TestCasefrom .models import Profile, Postclass ProfileViewTest(TestCase):def setUp(self):# Create test datauser = User.objects.create(username='testuser')profile = Profile.objects.create(user=user)Post.objects.create(author=user, content='Test post')def test_profile_view(self):# Make request to the APIresponse = self.client.get('/profile/testuser')self.assertEqual(response.status_code, 200)data = response.json()# Check if profile data is correctself.assertEqual(data['prof']['user'], 'testuser')self.assertEqual(len(data['posts']), 1)}
Xử lý dữ liệu JSON hiệu quả cho các ứng dụng web động
Việc xử lý hiệu quả phản hồi JSON là rất quan trọng khi làm việc với các API trả về dữ liệu từ nhiều nguồn, bao gồm cả hồ sơ người dùng và bài đăng. Trong ví dụ trước, chúng tôi đã sử dụng JavaScript để cập nhật động trang web sau khi tìm nạp dữ liệu từ chương trình phụ trợ Python. Nhưng việc tận dụng tối đa cách bạn xử lý và trình bày dữ liệu JSON cũng rất cần thiết khi làm việc với nó. Chúng ta có thể duyệt qua các mảng bài viết bằng cách sử dụng các vòng lặp hiệu quả như forEachvà xây dựng các phần tử HTML mà không cần viết HTML thô bên trong tệp JavaScript với sự trợ giúp của các kỹ thuật như tạo phần tử. Phương pháp này duy trì tính mô-đun của mã và dễ bảo trì.
Xử lý lỗi và xác thực dữ liệu là những yếu tố bổ sung quan trọng cần tính đến. Nếu không được xử lý thích hợp, phần phụ trợ có thể trả về dữ liệu không chính xác hoặc bị thiếu, điều này có thể dẫn đến sự cố ở giao diện người dùng. Chúng tôi có thể tránh bố cục bị hỏng hoặc sự cố JavaScript bằng cách triển khai chiến lược dự phòng trong mã JavaScript, chẳng hạn như xác định xem liệu phản ứng bao gồm dữ liệu cần thiết trước khi cố gắng hiển thị nó. Độ tin cậy là rất quan trọng trong các ứng dụng web quy mô lớn, do đó điều này đặc biệt quan trọng. Hơn nữa, sử dụng Django's JsonPhản hồi đảm bảo rằng dữ liệu được định dạng phù hợp để sử dụng ở giao diện người dùng.
Và cuối cùng, khi làm việc với nội dung động, vấn đề bảo mật luôn là mối lo ngại. Làm sạch dữ liệu trước khi hiển thị là một phương pháp để khắc phục điều này và ngăn chặn các lỗi bảo mật như các cuộc tấn công tập lệnh chéo trang (XSS). Tránh giới thiệu mã nguy hiểm tiềm tàng bằng cách sử dụng khả năng sửa đổi DOM tích hợp của JavaScript, chẳng hạn như văn bảnNội dung, thay vì bên trongHTML. Bằng cách tuân thủ các nguyên tắc này, bạn có thể chắc chắn rằng thông tin trên trang web của mình được an toàn và đáng tin cậy.
Các câu hỏi thường gặp về cách xử lý dữ liệu JSON bằng JavaScript và Python
- Điều gì làm cho fetch() tốt hơn các kỹ thuật AJAX khác?
- fetch() cung cấp API hiện đại, đơn giản để gửi yêu cầu HTTP; lời hứa được sử dụng để quản lý các tác vụ không đồng bộ, loại bỏ nhu cầu về cơ chế gọi lại phức tạp.
- Tại sao là response.json() được sử dụng trong khi lấy thông tin từ API?
- Để chuyển đổi phản hồi HTTP chưa được xử lý thành đối tượng JSON dễ thao tác và hiển thị bằng JavaScript, cần phải thực hiện bước 2.
- Làm thế nào forEach trợ giúp hiển thị dữ liệu bằng JavaScript?
- forEach là một phương pháp cho phép bạn lặp qua các mảng, như danh sách bài đăng và thêm các phần tử HTML một cách linh hoạt vào từng mục.
- Vai trò của là gì JsonResponse trong API Django?
- Một công cụ Django được gọi là JsonResponse chuyển đổi dữ liệu dưới dạng JSON để giao diện người dùng có thể quản lý và hiển thị dữ liệu đó một cách dễ dàng bằng JavaScript.
- Làm cách nào để tránh các lỗi bảo mật trong JavaScript khi sử dụng innerHTML?
- Để bảo vệ chống lại các cuộc tấn công XSS, tốt nhất nên sử dụng JavaScript textContent hoặc 10 kỹ thuật thay vì tiêm mã có khả năng gây hại.
Suy nghĩ cuối cùng về việc tìm nạp và hiển thị dữ liệu người dùng
Đối với các trang web động, việc tích hợp JavaScript với phần phụ trợ Python để truy xuất và hiển thị dữ liệu là một chiến lược hiệu quả. Việc tải lại trang hoàn chỉnh là không cần thiết để đảm bảo rằng giao diện người dùng cập nhật hiệu quả khi các kỹ thuật như tìm về và xử lý các câu trả lời JSON được sử dụng. Kết quả là trải nghiệm người dùng được nâng cao tổng thể.
Quản lý lỗi, bảo mật và tối ưu hóa đều phải được tính đến khi phát triển các chương trình như vậy. Ứng dụng sẽ linh hoạt hơn nếu xử lý các câu trả lời không đầy đủ và đảm bảo vệ sinh dữ liệu. Cách tiếp cận này cung cấp cơ sở vững chắc để bổ sung thêm các tính năng phức tạp hơn cho dự án của bạn trong tương lai.
Tài liệu tham khảo và đọc thêm
- Nội dung này dựa trên tài liệu chính thức của Django để xử lý JsonPhản hồi , cung cấp thông tin chi tiết về cách phản hồi JSON hoạt động ở Django.
- Để hiểu thêm về JavaScript Tìm nạp API , MDN cung cấp thông tin toàn diện về cách sử dụng nó để thực hiện các yêu cầu HTTP.
- Một tài nguyên hữu ích khác để thao tác DOM bằng JavaScript là tài liệu createElement từ MDN, hướng dẫn cách xây dựng các phần tử HTML một cách linh hoạt.
- Để hiểu cách tích hợp Python và Django để phát triển API, bài viết chính thức Dự án Django trang web cung cấp hướng dẫn chi tiết.
- Để tìm hiểu thêm về cách ngăn chặn các lỗ hổng bảo mật trong JavaScript như XSS, OWASP có hướng dẫn hữu ích về Tập lệnh chéo trang (XSS) các cuộc tấn công.