Cách lấy dữ liệu PHP trong jQuery
❮ Các phương thức AJAX của jQuery Show
Thí dụGửi yêu cầu HTTP GET tới một trang và nhận lại kết quả $("nút"). click(function(){ Định nghĩa và cách sử dụng$. phương thức get() tải dữ liệu từ máy chủ bằng yêu cầu HTTP GET ví dụYêu cầu "kiểm tra. php", nhưng bỏ qua kết quả trả về Yêu cầu "kiểm tra. php" và gửi một số dữ liệu bổ sung cùng với yêu cầu (bỏ qua kết quả trả về) $. nhận ("kiểm tra. php", { tên. "Donald", thị trấn. "Thị trấn vịt" }); Yêu cầu "kiểm tra. php" và chuyển mảng dữ liệu tới máy chủ (bỏ qua kết quả trả về) $. nhận ("kiểm tra. php", { 'màu[]'. ["Đỏ lục lam"] }); Yêu cầu "kiểm tra. php" và thông báo kết quả của yêu cầu $. nhận ("kiểm tra. php", function(data){ cú pháp$. get(URL,dữ liệu,hàm(dữ liệu,trạng thái,xhr),kiểu dữ liệu) Tham sốDescriptionURLBắt buộc. Chỉ định URL bạn muốn yêu cầu dữ liệuTùy chọn. Chỉ định dữ liệu để gửi đến máy chủ cùng với chức năng yêu cầu (dữ liệu, trạng thái, xhr) Tùy chọn. Chỉ định một chức năng sẽ chạy nếu yêu cầu thành công Thông số bổ sung.
Theo mặc định, jQuery thực hiện đoán tự động. Các loại có thể.
❮ Các phương thức AJAX của jQuery Ví dụ sau sẽ minh họa cách một trang web có thể lấy thông tin từ cơ sở dữ liệu bằng AJAX Thí dụThông tin cá nhân sẽ được liệt kê ở đây Giải thích ví dụ - Cơ sở dữ liệu MySQLBảng cơ sở dữ liệu chúng tôi sử dụng trong ví dụ trên trông như thế này idFirstNameLastNameTuổiQuê hươngCông việc1PeterGriffin41QuahogNhà máy bia2LoisGriffin40NewportGiáo viên dạy piano3JosephSwanson39QuahogSĩ quan cảnh sát4GlennVũng lầy41QuahogPhi côngVí dụ giải thíchTrong ví dụ trên, khi người dùng chọn một người trong danh sách thả xuống ở trên, một hàm có tên "showUser()" được thực thi Chức năng được kích hoạt bởi sự kiện onchange Đây là mã HTML Thí dụThông tin cá nhân sẽ được liệt kê tại đây. giải thích mã Trước tiên, hãy kiểm tra xem người đó có được chọn không. Nếu không chọn người nào (str == ""), xóa nội dung của txtHint và thoát khỏi chức năng. Nếu một người được chọn, hãy làm như sau
Tệp PHPTrang trên máy chủ được gọi bởi JavaScript ở trên là một tệp PHP có tên "getuser. php" Mã nguồn trong "getuser. php" chạy truy vấn đối với cơ sở dữ liệu MySQL và trả về kết quả trong bảng HTML Hôm nay, chúng ta sẽ khám phá khái niệm AJAX với PHP và JavaScript. Kỹ thuật AJAX giúp bạn cải thiện giao diện người dùng của ứng dụng và nâng cao trải nghiệm tổng thể của người dùng cuối Cách sử dụng AJAX trong PHP và jQuery AJAX là gì? AJAX là viết tắt của JavaScript và XML không đồng bộ và nó cho phép bạn tìm nạp nội dung từ máy chủ phụ trợ một cách không đồng bộ mà không cần làm mới trang. Do đó, nó cho phép bạn cập nhật nội dung của trang web mà không cần tải lại Hãy xem một ví dụ để hiểu cách bạn có thể sử dụng AJAX trong quá trình phát triển ứng dụng hàng ngày của mình. Giả sử bạn muốn tạo một trang hiển thị thông tin hồ sơ của người dùng, với các phần khác nhau như thông tin cá nhân, thông tin xã hội, thông báo, tin nhắn, v.v. Cách tiếp cận thông thường là xây dựng các trang web khác nhau cho mỗi phần. Vì vậy, ví dụ: người dùng sẽ nhấp vào liên kết thông tin xã hội để tải lại trình duyệt và hiển thị trang có thông tin xã hội. Tuy nhiên, điều này làm cho việc điều hướng giữa các phần chậm hơn vì người dùng phải đợi trình duyệt tải lại và trang hiển thị lại mỗi lần Mặt khác, bạn cũng có thể sử dụng AJAX để xây dựng giao diện tải tất cả thông tin mà không cần làm mới trang. Trong trường hợp này, bạn có thể hiển thị các tab khác nhau cho tất cả các phần và bằng cách nhấp vào tab, nó sẽ tải nội dung tương ứng từ máy chủ phụ trợ và cập nhật trang mà không cần làm mới trình duyệt. Điều này giúp bạn cải thiện trải nghiệm tổng thể của người dùng cuối Cuộc gọi AJAX tổng thể hoạt động giống như thế này Hãy nhanh chóng lướt qua quy trình AJAX thông thường
Như bạn có thể thấy, trang web được cập nhật dữ liệu theo thời gian thực từ máy chủ mà không cần tải lại trình duyệt Trong phần tiếp theo, chúng tôi sẽ hướng dẫn cách triển khai AJAX bằng vanilla JavaScript Cách AJAX hoạt động bằng Vanilla JavaScriptTrong phần này, chúng ta sẽ xem cách AJAX hoạt động trong vanilla JavaScript. Tất nhiên, có sẵn các thư viện JavaScript giúp thực hiện các cuộc gọi AJAX dễ dàng hơn, nhưng thật thú vị khi biết điều gì đang xảy ra bên trong Chúng ta hãy xem mã JavaScript vanilla sau đây, mã này thực hiện lệnh gọi AJAX và tìm nạp phản hồi từ máy chủ một cách không đồng bộ Hãy xem qua đoạn mã trên để hiểu điều gì đang xảy ra đằng sau hậu trường
Vì vậy, đó là cách AJAX hoạt động với vanilla JavaScript. Phương pháp ở đây, sử dụng "hàm gọi lại" là cách truyền thống để viết mã AJAX, nhưng một cách sạch hơn và hiện đại hơn là với Promise Trong phần tiếp theo, chúng ta sẽ xem cách sử dụng đối tượng 6 cho AJAXCách sử dụng lời hứa JavaScript cho AJAXCác lời hứa trong JavaScript cung cấp một cách tốt hơn để quản lý các hoạt động và lệnh gọi lại không đồng bộ phụ thuộc vào các lệnh gọi lại khác. Trong JavaScript, 6 là một đối tượng có thể có một trong ba trạng thái. đang chờ xử lý, giải quyết hoặc bị từ chối. Ban đầu, đối tượng 6 ở trạng thái chờ xử lý, nhưng khi hoạt động không đồng bộ hoàn tất, đối tượng này có thể chuyển sang trạng thái đã giải quyết hoặc bị từ chốiHãy nhanh chóng sửa lại ví dụ trước với đối tượng 6function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } ); Khi hàm function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );50 được gọi, nó sẽ trả về đối tượng lời hứa và ban đầu nó ở trạng thái chờ xử lý. Dựa trên phản hồi, nó sẽ gọi hàm function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );51 hoặc function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );52 . Tiếp theo, chúng tôi sử dụng phương pháp function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );53, được sử dụng để lên lịch gọi lại khi đối tượng lời hứa được giải quyết thành công. Phương thức function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );53 có hai đối số. Đối số đầu tiên là một cuộc gọi lại sẽ được thực thi khi lời hứa được giải quyết và đối số thứ hai là một cuộc gọi lại cho trạng thái bị từ chối Vì vậy, đó là cách bạn có thể sử dụng Lời hứa JavaScript cho AJAX. Trong phần tiếp theo, chúng ta sẽ xem cách sử dụng thư viện jQuery để thực hiện lệnh gọi AJAX Cách thức hoạt động của AJAX bằng thư viện jQueryTrong phần trước, chúng tôi đã thảo luận về cách bạn có thể thực hiện các lệnh gọi AJAX bằng vanilla JavaScript. Trong phần này, chúng ta sẽ sử dụng thư viện jQuery để chứng minh điều này. Tôi cho rằng bạn đã biết những kiến thức cơ bản về thư viện jQuery Thư viện jQuery cung cấp một vài phương thức khác nhau để thực hiện lệnh gọi AJAX, mặc dù ở đây chúng ta sẽ xem xét phương thức function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );55 tiêu chuẩn, phương thức thường được sử dụng nhất Hãy xem ví dụ sau Như bạn đã biết, ký hiệu function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );56 được dùng để chỉ một đối tượng jQuery Tham số đầu tiên của phương thức function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );55 là URL sẽ được gọi ở chế độ nền để tìm nạp nội dung từ phía máy chủ. Tham số thứ hai ở định dạng JSON và cho phép bạn chỉ định giá trị cho một số tùy chọn khác nhau được phương thức function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );55 hỗ trợ Trong hầu hết các trường hợp, bạn sẽ cần chỉ định các lệnh gọi lại thành công và lỗi. Cuộc gọi lại thành công sẽ được gọi sau khi hoàn thành thành công cuộc gọi AJAX. Phản hồi do máy chủ trả về sẽ được chuyển đến cuộc gọi lại thành công. Mặt khác, cuộc gọi lại thất bại sẽ được gọi nếu có sự cố và xảy ra sự cố khi thực hiện cuộc gọi AJAX Như bạn có thể thấy, thật dễ dàng để thực hiện các thao tác AJAX bằng thư viện jQuery. Trên thực tế, quy trình này ít nhiều giống nhau, bất kể thư viện JavaScript mà bạn chọn để thực hiện lệnh gọi AJAX Trong phần tiếp theo, chúng ta sẽ xem một ví dụ thực tế để hiểu cách thức hoạt động của tất cả điều này với PHP Một ví dụ AJAX trong thế giới thực với PHPTrong phần này, chúng ta sẽ xây dựng một ví dụ tìm nạp nội dung JSON từ tệp PHP ở phía máy chủ bằng AJAX Đối với mục đích trình diễn, chúng tôi sẽ xây dựng một ví dụ thực hiện đăng nhập của người dùng bằng AJAX và jQuery. Để bắt đầu, hãy tạo chỉ mục. php, như được hiển thị trong đoạn mã sau, hiển thị biểu mẫu đăng nhập cơ bản function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );5 chỉ mục. tệp php là một biểu mẫu HTML khá chuẩn chứa các trường tên người dùng và mật khẩu. Nó cũng chứa một đoạn mã JavaScript jQuery, đoạn mã này tuân theo phác thảo mà chúng ta đã thấy ở trên Chúng tôi đã sử dụng sự kiện function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );59 của thành phần biểu mẫu, sự kiện này sẽ được kích hoạt khi người dùng nhấp vào nút gửi. Trong trình xử lý sự kiện đó, chúng tôi đã bắt đầu lệnh gọi AJAX để gửi dữ liệu biểu mẫu tới thông tin đăng nhập. php sử dụng phương thức POST không đồng bộ. Khi chúng tôi nhận được phản hồi từ máy chủ, chúng tôi sẽ phân tích cú pháp phản hồi đó bằng phương thức function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );70 của đối tượng function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );71. Và cuối cùng, dựa trên thành công hay thất bại, chúng tôi đưa ra hành động phù hợp Hãy cũng xem những gì đăng nhập. php trông giống như function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );7 Đăng nhập. tệp php chứa logic xác thực người dùng và trả về phản hồi JSON dựa trên thành công hay thất bại của đăng nhập Sử dụng lời hứa cho AJAX với jQueryNgoài ra, phương thức function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );72 cũng hỗ trợ Lời hứa JavaScript. Nó cung cấp các phương pháp khác nhau như function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );53, function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );74, function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );75 và function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );76 mà bạn có thể sử dụng trong ngữ cảnh của Lời hứa Hãy nhanh chóng sửa lại đoạn mã jQuery mà chúng ta đã sử dụng trong ví dụ của mình để chỉ ra cách sử dụng nó với phương thức function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );53 function AjaxCallWithPromise() { return new Promise(function (resolve, reject) { const objXMLHttpRequest = new XMLHttpRequest(); objXMLHttpRequest.onreadystatechange = function () { if (objXMLHttpRequest.readyState === 4) { if (objXMLHttpRequest.status == 200) { resolve(objXMLHttpRequest.responseText); } else { reject('Error Code: ' + objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText); } } } objXMLHttpRequest.open('GET', 'request_ajax_data.php'); objXMLHttpRequest.send(); }); } AjaxCallWithPromise().then( data => { console.log('Success Response: ' + data) }, error => { console.log(error) } );6 Sự kết luậnTrong hướng dẫn này, chúng ta đã thảo luận những kiến thức cơ bản về AJAX và cách nó hoạt động với ứng dụng PHP. Trong nửa đầu của bài viết, chúng ta đã xem xét cách AJAX hoạt động trong vanilla JS và trong thư viện jQuery. Trong nửa sau, chúng tôi đã xây dựng một ví dụ thực tế minh họa cách bạn có thể sử dụng AJAX để tìm nạp nội dung PHP phía máy chủ Học PHP với một khóa học trực tuyến miễn phíNếu bạn muốn học PHP, hãy xem khóa học trực tuyến miễn phí của chúng tôi về các nguyên tắc cơ bản của PHP Trong khóa học này, bạn sẽ học các nguyên tắc cơ bản của lập trình PHP. Bạn sẽ bắt đầu với những kiến thức cơ bản, học cách PHP hoạt động và viết các hàm và vòng lặp PHP đơn giản. Sau đó, bạn sẽ xây dựng các lớp mã hóa để lập trình hướng đối tượng đơn giản (OOP). Đồng thời, bạn sẽ học tất cả các kỹ năng quan trọng nhất để viết ứng dụng cho web. bạn sẽ có cơ hội thực hành phản hồi các yêu cầu GET và POST, phân tích cú pháp JSON, xác thực người dùng và sử dụng cơ sở dữ liệu MySQL
Bạn cũng có thể học JavaScript miễn phí trên Envato Tuts+. JavaScript là ngôn ngữ của web. Nếu bạn muốn viết mã cho web, bạn cần biết JavaScript từ trong ra ngoài. Từ những khởi đầu khiêm tốn, JavaScript đã phát triển thành một ngôn ngữ mạnh mẽ và phức tạp với các tính năng như lớp, lời hứa, hàm mũi tên, trình tạo, mẫu chuỗi, v.v. Trong khóa học này, bạn sẽ học tất cả các khái niệm cơ bản về ngôn ngữ JavaScript. Đúng rồi. Tất cả bọn họ Tôi có thể sử dụng jQuery trong PHP không?Tất cả những gì bạn cần làm để sử dụng jQuery với PHP là đưa tệp javascript jQuery vào tài liệu HTML của bạn trong thẻ đầu .
Cách lấy giá trị thuộc tính dữ liệu trong jQuery?Để truy xuất giá trị thuộc tính data-* dưới dạng chuỗi chưa chuyển đổi, hãy sử dụng phương thức attr() . Kể từ jQuery 1. 6, dấu gạch ngang trong tên thuộc tính data-* đã được xử lý phù hợp với API bộ dữ liệu HTML. $("div").
Làm cách nào để lấy dữ liệu từ cuộc gọi ajax trong jQuery?Ví dụ sau đây cho thấy cách gửi một yêu cầu Ajax đơn giản. . Thí dụ. Yêu cầu jQuery Ajax. $. ajax('/jquery/getdata', // url yêu cầu { thành công. function (data, status, xhr) { // hàm gọi lại thành công $('p'). nối thêm (dữ liệu); . Thí dụ. Nhận dữ liệu JSON. . Thí dụ. phương thức ajax(). . Thí dụ. Gửi yêu cầu POST Làm cách nào để lấy giá trị biến jQuery trong PHP mà không cần ajax?Làm cách nào để lấy giá trị biến jquery trong PHP mà không cần Ajax? . var jsdata = { dữ liệu. "Bài kiểm tra" var jsondata = $. toJson(jsdata); $("#transferInput"). giá trị (jsondata); |