Lấy dữ liệu từ jQuery sang PHP

AJAX là nghệ thuật trao đổi dữ liệu với máy chủ và cập nhật các phần của trang web - mà không cần tải lại toàn bộ trang

Bảng sau đây liệt kê tất cả các phương thức AJAX của jQuery

Phương thứcMô tả$. ajax()Thực hiện yêu cầu AJAX không đồng bộ$. ajaxPrefilter() Xử lý các tùy chọn Ajax tùy chỉnh hoặc sửa đổi các tùy chọn hiện có trước mỗi yêu cầu được gửi và trước khi chúng được xử lý bởi $. ajax()$. ajaxSetup()Đặt giá trị mặc định cho các yêu cầu AJAX trong tương lai$. ajaxTransport() Tạo một đối tượng xử lý việc truyền dữ liệu Ajax thực tế$. get() Tải dữ liệu từ máy chủ bằng AJAX HTTP GET request$. getJSON() Tải dữ liệu được mã hóa JSON từ máy chủ bằng HTTP GET request$. parseJSON()$. getScript() Tải (và thực thi) JavaScript từ máy chủ bằng cách sử dụng AJAX HTTP GET request$. param() Tạo một đại diện được tuần tự hóa của một mảng hoặc đối tượng (có thể được sử dụng làm chuỗi truy vấn URL cho các yêu cầu AJAX)$. post() Tải dữ liệu từ máy chủ bằng cách sử dụng AJAX HTTP POST requestajaxComplete() Chỉ định chức năng chạy khi yêu cầu AJAX hoàn tấtsajaxError() Chỉ định chức năng chạy khi yêu cầu AJAX hoàn thành có lỗiajaxSend() Chỉ định chức năng chạy trước

Ví dụ sau đây sẽ minh họa cách một trang web có thể giao tiếp với máy chủ web trong khi người dùng nhập các ký tự vào trường nhập liệu

Ví dụ

Bắt đầu nhập tên vào trường nhập bên dưới

gợi ý


Ví dụ giải thích

Trong ví dụ trên, khi người dùng nhập một ký tự vào trường nhập liệu, một hàm có tên "showHint()" sẽ được thực thi

Chức năng được kích hoạt bởi sự kiện onkeyup

Đây là mã HTML

Ví dụ





Bắt đầu nhập tên vào trường nhập bên dưới



Tên đầu tiên
 

gợi ý



Chạy ví dụ »

giải thích mã

Trước tiên, hãy kiểm tra xem trường đầu vào có trống không (chuỗi. chiều dài == 0). Nếu đúng như vậy, hãy xóa nội dung của trình giữ chỗ txtHint và thoát khỏi chức năng

jQuery và Ajax là những từ thông dụng ngày nay trong cộng đồng phát triển web và đó là kỹ năng bắt buộc phải có đối với nhà phát triển web. Trong hướng dẫn này, chúng ta sẽ khám phá ví dụ về jQuery AJAX với php  MySQL và cách chúng ta có thể gửi yêu cầu nhận AJAX bằng cách sử dụng jQuery để tìm nạp dữ liệu từ máy chủ cơ sở dữ liệu MySQL. Hãy để chúng tôi khám phá Ajax là gì và tại sao nó lại phổ biến với jQuery và xem cách chúng tôi có thể thực hiện yêu cầu AJAX GET để lấy dữ liệu từ máy chủ

Lấy dữ liệu từ jQuery sang PHP
Lấy dữ liệu từ jQuery sang PHP

Tại sao AJAX và jQuery lại quan trọng?

AJAX là viết tắt của JavaScript và XML không đồng bộ. Nó sử dụng đối tượng  XMLHttpRequest để giao tiếp với Máy chủ. Nó có thể gửi đến máy chủ và nhận dữ liệu từ máy chủ ở các định dạng khác nhau như JSON, XML, HTML hoặc Văn bản một cách không đồng bộ, ngăn không cho toàn bộ trang được làm mới.

jQuery là một thư viện JavaScript có trọng lượng nhẹ và có sẵn nhiều plugin để thực hiện các tác vụ khác nhau một cách dễ dàng. jQuery che giấu sự phức tạp của JavaScript đơn giản và cung cấp một cách nhanh chóng để thực hiện các tác vụ khác nhau. Nó có một số phương pháp được sử dụng để thực hiện các yêu cầu AJAX

Các phương thức AJAX của jQuery

$. ajax – Phương thức này thực hiện yêu cầu không đồng bộ

$. get – Phương thức này thực hiện yêu cầu HTTP AJAX GET

$. getJSON – Phương thức này lấy dữ liệu được mã hóa JSON bằng cách sử dụng yêu cầu AJAX HTTP GET

$. bài đăng - Phương thức này tải dữ liệu từ máy chủ bằng yêu cầu AJAX HTTP POST

Thực hiện yêu cầu AJAX GET để lấy dữ liệu từ máy chủ

Sử dụng jQuery, yêu cầu AJAX GET có thể tìm nạp dữ liệu từ máy chủ. Nhiệm vụ chúng ta sẽ làm là tìm nạp người dùng từ cơ sở dữ liệu MySQL bằng jQuery AJAX

 

1. Tạo bảng MySQL và chèn dữ liệu

2. Tạo biểu mẫu HTML và tập lệnh jQuery để thực hiện AJAX GET Request tới PHP MySQL Server

3. Viết tập lệnh PHP để nhận yêu cầu từ máy khách và lấy dữ liệu từ cơ sở dữ liệu MySQL và gửi kết quả được mã hóa JSON cho máy khách

1. Tạo bảng và cơ sở dữ liệu MySql bằng PHPMyAdmin

1. Tạo cơ sở dữ liệu MySQL. dbusers

2. Tạo bảng trong cơ sở dữ liệu. người dùng

3. Chèn dữ liệu vào bảng

 

create DATABASE dbusers;

CREATE TABLE IF NOT EXISTS users ( id int(11) NOT NULL,

first_name varchar(255) NOT NULL,

last_name varchar(255) NOT NULL,

email varchar(255) NOT NULL )

ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE users ADD PRIMARY KEY (id);

ALTER TABLE users MODIFY id int(11) NOT NULL AUTO_INCREMENT;

INSERT INTO users (id, first_name, last_name, email)

VALUES (NULL, "John", "Doe", "[email protected]"), (NULL, "Mark", "William", "[email protected]");

Mã HTML và jQuery

Bây giờ tôi hy vọng bạn đã cài đặt PHP, Apache, MySQL trên hệ thống của mình bằng WAMP, XAMPP hoặc MAMP

  1. Tạo thư mục cho tên dự án ajaxjquery bên trong thư mục gốc của bạn

2. Tạo chỉ mục tệp. php bên trong thư mục ajaxjquery

3. Thêm mã HTML sẽ hiển thị một nút

4. Khi người dùng nhấp vào một nút, một yêu cầu AJAX sẽ được đăng lên máy chủ PHP MySQL

5. PHP MySQL sẽ trả lại kết quả được mã hóa JSON cho khách hàng

Tạo Form và mã sự kiện nút onClick

 
 
   AJAX jQuery Example with PHP MySQL 
    

 


 
 

AJAX jQuery Example with PHP MySQL

Click on button to display users records from database

Trong mã HTML, chúng tôi tạo một nút. Phương thức onclick của nút sẽ thực hiện yêu cầu GET và sẽ nhúng kết quả vào div

Jquery hàm $()

Bên trong thẻ script đầu tiên, chúng tôi đã gọi jQuery từ jQuery CDN để chúng tôi có thể thực hiện một yêu cầu AJAX. Trong thẻ tập lệnh thứ hai, chúng tôi có một khối mã bên trong

$(function(){

}

Đoạn mã trên là đoạn mã jQuery đảm bảo mã bên trong khối này thực thi sau khi toàn bộ trang được tải. Đoạn mã tiếp theo

Mã jQuery Ajax


  
   

Trong đoạn mã trên khi người dùng nhấp vào nút có id là  #getusers. Một yêu cầu AJAX được đăng lên một trang PHP có tên getrecords. php. Trang PHP trả về kết quả được mã hóa JSON. Sử dụng phương thức của jQuery $. kết quả parseJSON được giải mã và một vòng lặp được thực hiện thông qua mảng dữ liệu. Thông tin người dùng của vòng lặp bên trong được nối bên trong một bảng và sau đó tất cả các bản ghi được thêm vào một div bằng phương thức HTML trong jQuery

Mã PHP để truy cập các bản ghi từ cơ sở dữ liệu

Trong bước cuối cùng này, chúng ta phải tạo một tập lệnh PHP sẽ chấp nhận yêu cầu và gửi lại kết quả được mã hóa JSON. Vì vậy, sau đây là các bước

1. Kết nối với cơ sở dữ liệu MySQL

2. Thực hiện truy vấn sau khi kết nối thành công với cơ sở dữ liệu

3. Sau khi thực hiện truy vấn, hãy mã hóa kết quả trong một mảng JSON và trả về máy khách

Kết nối cơ sở dữ liệu

Để kết nối với máy chủ cơ sở dữ liệu MySQL, chúng tôi phải cung cấp tên máy chủ, tên người dùng, mật khẩu và tên cơ sở dữ liệu cho chức năng mysqli. Mảng siêu toàn cầu $_POST chứa dữ liệu từ phía máy khách. Về phía máy khách nếu chúng ta sử dụng phương thức post, thì dữ liệu trên máy chủ nằm trong mảng siêu toàn cầu $_POST và nếu phương thức ở dạng máy khách là GET thì trên máy chủ, dữ liệu nằm trong mảng siêu toàn cầu $_GET

connect_error) {

     die("Connection to database failed: " . $conn->connect_error);
}

/* SQL query to get results from database */

$sql = "SELECT id, first_name, last_name, email FROM users ";

$result = $conn->query($sql);

/* If there are results from database push to result array */

if ($result->num_rows > 0) {

    while($row = $result->fetch_assoc()) {

        array_push($result_array, $row);

    }

}

/* send a JSON encded array to client */
header('Content-type: application/json');
echo json_encode($result_array);

$conn->close();

?>

Trong bài viết này, chúng ta đã khám phá  phương thức AJAX GET của jQuery để tìm nạp kết quả từ Máy chủ.

Ví dụ về phương thức jQuery AJAX Post 

 

Lấy dữ liệu từ jQuery sang PHP
Lấy dữ liệu từ jQuery sang PHP

Bây giờ chúng ta sẽ khám phá phương thức jQuery AJAX post .

1. Tạo một tập tin postdata. php bên trong thư mục ajaxjquery

2. Thêm mã HTML sẽ hiển thị các trường biểu mẫu bằng một nút

3. Khi người dùng điền vào biểu mẫu và nhấp vào nút, một yêu cầu AJAX POST sẽ được gửi đến máy chủ

4. Dữ liệu sau khi xác thực được lưu vào cơ sở dữ liệu

5. Máy chủ trả lại kết quả được mã hóa JSON cho máy khách

Khóa học video về jQuery AJAX Post Ví dụ

Biểu mẫu HTML và Mã jQuery



   jQuery AJAX POST Example
   


 

jQuery AJAX Post method example with php and MySQL

Please fill in the form and click save.

 
 
 
 

 

Giải thích biểu mẫu HTML

Trong thẻ biểu mẫu, chúng tôi đã tạo các hộp văn bản cho first_name, last_name và email. Các thuộc tính HTML5 mới như placehoder (Được sử dụng để hiển thị văn bản cho người dùng bên trong văn bản được gửi, Văn bản này biến mất khi người dùng bắt đầu nhập) và bắt buộc (Được sử dụng để xác thực để trường không trống) được sử dụng

Trong HTML5, một số yếu tố mới cũng được giới thiệu như email. Loại email sẽ buộc người dùng nhập địa chỉ email hợp lệ

Lấy dữ liệu từ jQuery sang PHP
Lấy dữ liệu từ jQuery sang PHP

giải thích mã jQuery

Bên dưới mã biểu mẫu có thẻ onclick của nút có id saveusers.

Chúng tôi đang sử dụng . hàm on của jQuery có hai đối số.

1. sự kiện (nhấp chuột)

2. hàm gọi lại . Khi người dùng nhấp vào nút, chức năng gọi lại sẽ thực thi. Trong hàm lấy các giá trị của tên, họ và email bằng cách sử dụng hàm  val() trong jQuery và lưu vào các biến.

$. Chức năng AJAX và xác thực

tính bằng đô la. ajax, chúng tôi chỉ định phương thức gửi dữ liệu dưới dạng POST, URL  của tập lệnh PHP và dữ liệu để đăng. TRONG. hoàn thành chức năng, chúng tôi kiểm tra phản hồi được gửi bởi máy chủ. Dựa trên phản hồi của máy chủ, hãy tạo một thông báo, thay đổi màu của văn bản thành màu đỏ bằng cách sử dụng jQuery. css và sau đó hiển thị nó cho người dùng bằng cách sử dụng. chức năng html

Mã phía máy chủ PHP để lưu dữ liệu vào cơ sở dữ liệu MySQL

Chúng tôi tạo kết nối đến máy chủ MySQL, lấy dữ liệu từ phía máy khách và cuối cùng sau khi xác thực, lưu dữ liệu vào cơ sở dữ liệu. Trong các phiên bản PHP mới hơn, các hàm mysql_* không được dùng nữa.

Hiện tại các chức năng mysqli hoặc PDO được sử dụng, các chức năng mới hơn này cung cấp các câu lệnh đã chuẩn bị sẵn để ngăn chặn sql injection . attacks.

Xác nhận dữ liệu

Chúng tôi cũng phải thực hiện xác thực phía máy chủ. Nếu bất kỳ hộp văn bản nào trong biểu mẫu trống, chúng tôi phải hiển thị cho người dùng thông báo lỗi bằng cách gửi $result giá trị là 2, Chúng tôi tạo một câu lệnh đã chuẩn bị sẵn để chèn và liên kết các tham số. Sau khi kết quả thực hiện truy vấn thành công được gửi lại cho khách hàng cuối

Chèn dữ liệu vào cơ sở dữ liệu bằng jQuery ajax post

connect_error) {

     die("Connection to database failed: " . $conn->connect_error);
}

/* Get data from Client side using $_POST array */

$fname  = $_POST['first_name'];

$lname  = $_POST['last_name'];

$email  = $_POST['email'];

/* validate whether user has entered all values. */

if(!$fname || !$lname || !$email){

  $result = 2;

}elseif (!strpos($email, "@") || !strpos($email, ".")) {

  $result = 3;

}else {

   //SQL query to get results from database
   $sql    = "insert into users (first_name, last_name, email) values (?, ?, ?)  ";

   $stmt   = $conn->prepare($sql);

   $stmt->bind_param('sss', $fname, $lname, $email);

   if($stmt->execute()){
     
        $result = 1;
     
   }

}

echo $result;

$conn->close();

Tóm lược

Để tóm tắt trong hướng dẫn này, chúng ta đã học về jQuery AJAX và cách thực hiện các yêu cầu GET và POST tới máy chủ

Mã nguồn cho phương thức jQuery AJAX Get

Nhấp vào đây để sao chép hoặc tải xuống mã nguồn ví dụ cho jQuery AJAX NHẬN ví dụ từ GitHub.

Lấy dữ liệu từ jQuery sang PHP
Lấy dữ liệu từ jQuery sang PHP

Mã nguồn cho phương thức jQuery AJAX POST

Bạn có thể tải xuống hoặc sao chép mã nguồn phương thức jQuery AJAX POST từ kho lưu trữ GitHub.

Lấy dữ liệu từ jQuery sang PHP
Lấy dữ liệu từ jQuery sang PHP

Vui lòng để lại nhận xét và phản hồi của bạn bên dưới. Để giữ cho mình được cập nhật, vui lòng đăng ký nhận bản tin của chúng tôi

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

Thực hiện yêu cầu AJAX GET để lấy dữ liệu từ máy chủ .
Tạo bảng MySQL và chèn dữ liệu
Tạo biểu mẫu HTML và tập lệnh jQuery để thực hiện AJAX GET Request tới PHP MySQL Server
Viết tập lệnh PHP để nhận yêu cầu từ máy khách và lấy dữ liệu từ cơ sở dữ liệu MySQL và gửi kết quả được mã hóa JSON cho máy khách

Làm cách nào để gọi một hàm jQuery trong php?

php if( một số điều kiện ){ echo ""; . "; . "; . "; . "; . "; . "; . "; . jQuery(function(){ //Mã của bạn });

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

Tìm nạp dữ liệu từ cơ sở dữ liệu bằng ajax trong PHP .
Kết nối PHP với cơ sở dữ liệu MySQL. Trước hết, bạn cần kết nối PHP với cơ sở dữ liệu MYSQL. .
Tạo Nút HTML để hiển thị dữ liệu khi nhấp chuột. Định cấu hình các bước sau –.
Hiển thị dữ liệu mà không cần tải lại trang bằng ajax. .
Tìm nạp dữ liệu từ bảng MySQL bằng PHP

Làm cách nào để gửi dữ liệu từ javascript sang php bằng AJAX?

Trong hướng dẫn này, tôi chỉ cho bạn cách gửi các yêu cầu GET và POST AJAX bằng JavaScript và xử lý yêu cầu bằng PHP. .
Tạo một bảng. .
Cấu hình cơ sở dữ liệu. .
Tạo bố cục HTML. .
Tạo một tệp PHP để xử lý yêu cầu AJAX. .
Cách tạo yêu cầu AJAX bằng JavaScript. .
đầu ra. .
Phần kết luận