Làm cách nào để tìm kiếm dữ liệu trong PHP bằng AJAX?

Trong bài đăng này, bạn có thể tìm thấy hướng dẫn về Cách tạo Tìm kiếm cơ sở dữ liệu Mysql trực tiếp Ajax bằng JavaScript với tập lệnh PHP. Với sự trợ giúp của hướng dẫn này, bạn có thể tìm hiểu cách triển khai chức năng tìm kiếm dữ liệu Ajax Live trong trang web HTML của mình bằng cách sử dụng javaScript mà không cần sử dụng bất kỳ thư viện bổ sung nào như jQuery. Vì vậy, từ trang web HTML, bạn có thể tìm kiếm cơ sở dữ liệu mysql bằng tập lệnh PHP với sự trợ giúp của Ajax

Nếu bạn muốn cải thiện giao diện người dùng ứng dụng web của mình thì lúc đó chúng tôi phải yêu cầu dữ liệu cơ sở dữ liệu tìm kiếm mà không cần tải lại toàn bộ trang web. Vì vậy, để có giải pháp cho vấn đề này, tại đây bạn có thể xem cách chúng tôi có thể triển khai tìm kiếm dữ liệu trực tiếp ajax bằng cách sử dụng javaScript với tập lệnh PHP. Từ bài đăng này, bạn có thể thấy cách chúng tôi có thể dễ dàng tìm kiếm trực tiếp với Mysql bằng cách sử dụng javaScript với Ajax

Tìm kiếm cơ sở dữ liệu trực tiếp Ajax bằng javaScript

Nếu bạn đang tìm kiếm chức năng tìm kiếm Dữ liệu trực tiếp bằng cách sử dụng thuần javaScript, thì bạn có thể đến đúng chỗ vì trong hướng dẫn này, chúng tôi đã đề cập đến chủ đề chức năng tìm kiếm cơ sở dữ liệu trực tiếp đơn giản bằng cách sử dụng javaScript với Ajax và PHP, trong đó kết quả tìm kiếm sẽ bắt đầu hiển thị

Trong hướng dẫn này, chúng tôi sẽ tạo hộp tìm kiếm trực tiếp sẽ tìm kiếm dữ liệu trong bảng mysql và hiển thị kết quả trên trang web mà không cần làm mới trang web, vì ở đây chúng tôi đã sử dụng Ajax trong javaScript

Xem bản trình diễn

Tải xuống mã nguồn

Bước 1. Tạo bảng cơ sở dữ liệu

Để tạo bảng trong cơ sở dữ liệu mysql, chúng ta cần thực hiện truy vấn SQL sau để tạo bảng bài đăng trong cơ sở dữ liệu MySQL của bạn

--
-- Table structure for table `post`
--

CREATE TABLE `post` (
  `id` mediumint(8) UNSIGNED NOT NULL,
  `post_title` text,
  `post_description` text,
  `author` varchar(255) DEFAULT NULL,
  `datetime` datetime DEFAULT NULL,
  `post_image` varchar(150) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `post`
--
ALTER TABLE `post`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `post`
--
ALTER TABLE `post`
  MODIFY `id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT;

Khi bảng đã được tạo, bạn phải chèn một số dữ liệu bằng cách sử dụng câu lệnh SQL INSERT. Sau khi chèn dữ liệu vào bảng MySQL, bạn có thể thực hiện thao tác tìm kiếm cơ sở dữ liệu trực tiếp bằng cách sử dụng vanilla javascript thuần túy

Bước 2. Tạo biểu mẫu tìm kiếm & bảng để tải dữ liệu

Sau khi cơ sở dữ liệu MySQL của bạn đã sẵn sàng, chúng ta phải tiến hành viết mã HTML và mã javaScript. Đầu tiên chúng ta phải tạo giao diện web cho phép người dùng thực hiện chức năng tìm kiếm trực tiếp

Trong hướng dẫn này, chúng tôi sẽ viết mã HTML và javaScript dưới chỉ mục. html, mã nguồn bạn có thể tìm thấy bên dưới

	
	
	
    


    

    	
Live Mysql Data Search using javaScript with PHP
    	
    	

    		

    			

    				
Sample Data
    				
Total Data - 
    				

    					
    				
    			
    		
    		

    			

    				

    					

    						
#
    						
Post Title
    						
Description
    					
    				
    				

    			
    		
    	
    	
    

Trong đoạn mã trên, đầu tiên chúng tôi tạo biểu mẫu Tìm kiếm để bạn có thể nhập truy vấn tìm kiếm của họ và bên dưới biểu mẫu này, chúng tôi đã tạo một bảng trong bảng này, chúng tôi sẽ tải dữ liệu bảng sau khi tải trang bằng cách sử dụng javaScript

Bên dưới mã HTML, chúng tôi đã viết mã javaScript và bên dưới mã này, chúng tôi đã tạo một hàm load_data(query = ''). Hàm này sẽ được gọi khi trang được tải xong, lúc đó nó sẽ nhận tất cả dữ liệu bảng bài đăng ở định dạng JSON và chuyển đổi dữ liệu đó sang định dạng HTML và hiển thị trên trang này. Và khi người dùng nhập nội dung nào đó vào hộp văn bản tìm kiếm, thì chức năng này cũng sẽ được gọi và nó sẽ chỉ hiển thị dữ liệu lọc trên trang web mà không làm mới trang web. Điều này là do, chúng tôi đã gọi chức năng này trong hộp văn bản tìm kiếm onkeyup="load_data(this. value);", vì vậy khi người dùng nhập nội dung nào đó thì hàm javascript này sẽ được gọi và nó sẽ hiển thị dữ liệu bộ lọc trên trang web

Bước 3. Xử lý truy vấn tìm kiếm tại PHP Script

Bây giờ chúng tôi đã đến với mã tập lệnh PHP phụ trợ mà chúng tôi sẽ viết trong process_data. tập tin php. Trong tệp này, chúng tôi sẽ viết tập lệnh PHP sẽ tìm kiếm dữ liệu cơ sở dữ liệu MySQL dựa trên chuỗi truy vấn mà người dùng đã gửi theo yêu cầu Ajax và tập lệnh PHP này sẽ gửi dữ liệu trở lại yêu cầu ajax trong chuỗi JSON đã được hiển thị trong trình duyệt cho phía người dùng

Trong tập lệnh PHP này, trước tiên chúng tôi đã tạo kết nối cơ sở dữ liệu và sau khi thực hiện kết nối cơ sở dữ liệu, tập lệnh này kiểm tra yêu cầu ajax đã được nhận từ tìm nạp tất cả dữ liệu từ bảng bài đăng hoặc truy vấn tìm kiếm đã được gửi để tìm nạp dữ liệu bộ lọc từ cơ sở dữ liệu

Giả sử đã nhận được yêu cầu Ajax để tìm nạp tất cả dữ liệu từ cơ sở dữ liệu Mysql thì ở đây chúng tôi đã viết truy vấn CHỌN để tìm nạp tất cả dữ liệu từ bài đăng và gửi lại dữ liệu cho yêu cầu Ajax ở định dạng JSON

Nhưng giả sử đã nhận được yêu cầu Ajax để lấy dữ liệu bộ lọc từ cơ sở dữ liệu MySQL. Vì vậy, trong tập lệnh này, trước tiên, nó có truy vấn tìm kiếm rõ ràng bằng cách sử dụng hàm preg_replace() để ngăn SQL Injection và sau đó viết truy vấn CHỌN với câu lệnh THÍCH để tìm kiếm dữ liệu từ bảng MySQL sau và trả lại dữ liệu cho yêu cầu Ajax ở định dạng JSON

Phần kết luận

Trong bài đăng này, bạn đã học cách tạo tìm kiếm trực tiếp trong PHP với bảng cơ sở dữ liệu MySQL bằng javaScript và Ajax

Nếu bạn muốn có được nguồn hoàn chỉnh với. sql, vì vậy vui lòng viết địa chỉ email của bạn vào hộp nhận xét. Chúng tôi sẽ gửi cho bạn tệp mã nguồn hoàn chỉnh tại địa chỉ email xác định của bạn

Làm cách nào để tìm kiếm dữ liệu trong cơ sở dữ liệu bằng php?

Làm cách nào để tìm kiếm trong mã php?

Làm cách nào để tải dữ liệu từ ajax trong php?

Làm cách nào để lấy dữ liệu từ jQuery ajax trong php?