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
Giải thích ví dụ - Hàm showCustomer[]
Khi người dùng chọn một khách hàng trong danh sách thả xuống ở trên, một chức năng có tên là showCustomer[] được thực thi. Chức năng được kích hoạt bởi sự kiện onchange
hiệnKhách hàng
function showCustomer[str] {
if [str == ""] {
tài liệu. getElementById["txtHint"]. innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest[];
xhttp.onload = function[] {
tài liệu. getElementById["txtHint"]. bên trongHTML = cái này. responseText;
}
xhttp. open["NHẬN", "nhận khách hàng. php?q="+str];
xhttp. gửi[];
}
Hàm showCustomer[] thực hiện như sau
- Kiểm tra xem khách hàng có được chọn không
- Tạo một đối tượng XMLHttpRequest
- Tạo chức năng sẽ được thực thi khi phản hồi của máy chủ đã sẵn sàng
- Gửi yêu cầu đến một tệp trên máy chủ
- Lưu ý rằng một tham số [q] được thêm vào URL [với nội dung của danh sách thả xuống]
Trang máy chủ AJAX
Trang trên máy chủ được gọi bởi JavaScript ở trên là một tệp PHP có tên "getcustomer. php"
Mã nguồn trong "getcustomer. php" chạy truy vấn đối với cơ sở dữ liệu và trả về kết quả trong bảng HTML
và rõ ràng là tôi có chức năng addrow[] hoạt động tốt. Chức năng này được gọi khi nhấp vào nút lưu
$["#submit"].click[function[e] {
e.preventDefault[];
var obsName = $["#Obstacle"].val[];
var likeli = $["#Likelihood"].val[];
var sever = $["#Severity"].val[];
var princ = $["#Principal"].val[];
var risk = $["#ObsRisk"].val[];
var value = $["#ObsValue"].val[];
var dataString = 'obsName='+Obstacle+'likeli='+Likelihood+'sever='+Severity+'princ='+Principal+'risk='+ObsRisk+'value='+ObsValue;
$.ajax[{
type:'POST',
data:dataString,
url:'saveObstacles.php',
success:function[data] {
alert[data];
}
}];
}];cuối cùng mã php của tôi trông như thế này
Thêm giải pháp của bạn ở đây
B I U S small BIG code var & link [^] encode untab case indent outdent
Xem trước 0
thành viên hiện tại
hoặc tham gia với chúng tôi
Tải xuống, Bình chọn, Nhận xét, Xuất bản
Email của bạn
Email này đang được sử dụng. Bạn có cần mật khẩu của bạn?
Mật khẩu tùy chọn
Khi trả lời câu hỏi, vui lòng.
- Đọc kỹ câu hỏi.
- Hiểu rằng tiếng Anh không phải là ngôn ngữ đầu tiên của mọi người, vì vậy hãy khoan dung với lỗi chính tả và ngữ pháp
- Nếu một câu hỏi được diễn đạt kém thì hãy yêu cầu làm rõ, bỏ qua nó hoặc chỉnh sửa câu hỏi và khắc phục sự cố. Xúc phạm không được chào đón
- Đừng bảo ai đó đọc hướng dẫn. Rất có thể họ có và không nhận được. Đưa ra câu trả lời hoặc chuyển sang câu hỏi tiếp theo
Let's work to help developers, not make them feel stupid.
Nội dung này, cùng với bất kỳ tệp và mã nguồn liên quan nào, được cấp phép theo Giấy phép Mở Dự án Code [CPOL]
Đôi khi bạn cần làm việc từ phía máy khách trở lại máy chủ. Hướng dẫn này trình bày cách sử dụng jQuery để đọc các giá trị trong bảng HTML và lưu trữ các giá trị trong một mảng Javascrip có thể được gửi tới tập lệnh PHP trên máy chủ. Các ví dụ về mã trên trang này là các đoạn mã chức năng và có thể được xem trong nguồn của trang này
Hướng dẫn này được chia thành các bước sau đây để rõ ràng
- Sử dụng jQuery để đọc các giá trị trong bảng HTML
- Lưu trữ các giá trị bảng HTML trong một mảng Javascript đa chiều
- Chuyển mảng Javascript sang định dạng JSON
- Gửi mảng JSON tới tập lệnh PHP bằng jQuery AJAX
- Cách truy cập mảng Javascript được mã hóa JSON trong PHP
The following table will be used to demonstrate the code samples. The table has an id of “sampleTbl” [
] . This id will be used in the jQuery selector to access the table.nhiệm vụ số. NgàyMô tảNhiệm vụ124 tháng 12 năm 2012Đêm Giáng sinhLàm bữa tối211 tháng 1 năm 2013Ngày kỷ niệmNhận hoa37 tháng 3 năm 2013Sinh nhậtNhận quàSử dụng jQuery để đọc các giá trị văn bản trong bảng HTML
Bước đầu tiên là thiết lập mã để truy cập từng ô của bảng. Mã jQuery sau đây có thể được sử dụng để đọc từng giá trị ô trong bảng trên. Trong ví dụ này, giá trị của mỗi ô trong bảng được thêm vào biến TableData. Ở cuối mỗi hàng, một ký tự dòng mới [‘\n’] được thêm vào chuỗi giúp chuỗi dễ đọc hơn cho đầu ra
$['#sampleTbl tr'].each[function[row, tr]{
TableData = TableData
+ $[tr].find['td:eq[0]'].text[] + ' ' // Task No.
+ $[tr].find['td:eq[1]'].text[] + ' ' // Date
+ $[tr].find['td:eq[2]'].text[] + ' ' // Description
+ $[tr].find['td:eq[3]'].text[] + ' ' // Task
+ '\n';
}];jquery. mỗi hàm được sử dụng để lặp qua các hàng của bảng lưu trữ mã định danh hàng của bảng trong biến tr. Đối tượng này đại diện cho đối tượng của hàng đang hoạt động. Với mỗi lần lặp, jQuery. mã tìm được sử dụng để xác định vị trí cột trong hàng bằng cách sử dụng giá trị chỉ mục dựa trên số không
Ví dụ: các cột trong bảng mẫu sẽ có giá trị chỉ mục từ 0 – 3. Mật mã. $[tr]. tìm [‘td. eq[2]’]. text[] được sử dụng để đọc giá trị văn bản trong cột Mô tả
Lưu trữ giá trị bảng HTML vào đối tượng mảng Javascript đa chiều
Sau khi bạn hiểu cách truy cập các giá trị văn bản trong mỗi ô của bảng, bước tiếp theo là lưu các giá trị trong một mảng. Đoạn mã sau sẽ đọc bảng và lưu trữ các giá trị ô trong mảng TableData
var TableData = new Array[];
$['#sampleTbl tr'].each[function[row, tr]{
TableData[row]={
"taskNo" : $[tr].find['td:eq[0]'].text[]
, "date" :$[tr].find['td:eq[1]'].text[]
, "description" : $[tr].find['td:eq[2]'].text[]
, "task" : $[tr].find['td:eq[3]'].text[]
}
}];
TableData.shift[]; // first row is the table header - so removeĐối với bảng mẫu, giá trị của biến hàng là chỉ số hàng của bảng và sẽ nằm trong khoảng từ 0 – 3. Vì hàng tiêu đề không cần thiết, shift được sử dụng để bật nó ra khỏi mảng. Bảng dữ liệu. sự thay đổi[];
Chuyển đổi một mảng Javascript sang định dạng JSON
Chuyển đổi một mảng Javascript thành định dạng JSON rất dễ thực hiện với jQuery-json, một plugin jQuery miễn phí. Bao gồm plugin này trên trang chạy tập lệnh Javascript của bạn
Khi plugin này được cài đặt, $. hàm toJSON sẽ tuần tự hóa một đối tượng javascript thành định dạng JSON
var TableData;
TableData = storeTblValues[]
TableData = $.toJSON[TableData];
function storeTblValues[]
{
var TableData = new Array[];
$['#sampleTbl tr'].each[function[row, tr]{
TableData[row]={
"taskNo" : $[tr].find['td:eq[0]'].text[]
, "date" :$[tr].find['td:eq[1]'].text[]
, "description" : $[tr].find['td:eq[2]'].text[]
, "task" : $[tr].find['td:eq[3]'].text[]
}
}];
TableData.shift[]; // first row will be empty - so remove
return TableData;
}Mã để chuyển đổi mảng TableData sang định dạng JSON là. Dữ liệu bảng = $. toJSON[TableData];
Mảng TableData hiện đã sẵn sàng để gửi tới máy chủ PHP script
Gửi mảng JSON tới PHP
Đối với ví dụ này, jQuery $. chức năng ajax được sử dụng. Loại biến được đặt thành “POST” và url được đặt thành tập lệnh PHP mẫu
var TableData;
TableData = $.toJSON[storeTblValues[]];
$.ajax[{
type: "POST",
url: "processJSONarray.php",
data: "pTableData=" + TableData,
success: function[msg]{
// return value stored in msg variable
}
}];Đối với phương thức AJAX này, mảng TableData được mã hóa JSON đang được chuyển đến máy chủ thông qua biến POST pTableData. Phản hồi của máy chủ sẽ nằm trong biến msg trong trình xử lý thành công
Xử lý một đối tượng mảng Javascript được mã hóa JSON trong PHP
Sau khi mảng được mã hóa JSON được gửi đến URL đích, tập lệnh PHP sẽ cần thực hiện 2 bước trước khi truy cập các giá trị của mảng;
- Unescape các giá trị chuỗi trong mảng JSON
- Giải mã mảng JSON
// Unescape the string values in the JSON array
$tableData = stripcslashes[$_POST['pTableData']];
// Decode the JSON array
$tableData = json_decode[$tableData,TRUE];
// now $tableData can be accessed like a PHP array
echo $tableData[1]['description'];
Trong ví dụ này, hàm stripcslashes[] của thư viện PHP được sử dụng. Điều này là do trong quá trình mã hóa JSON, các trích dẫn xung quanh các biến chuỗi đã bị thoát. Nếu không có dấu gạch chéo, chức năng json_decode sẽ không thành công
Khi mảng đã được xử lý bởi hàm json_decode, mảng có thể được truy cập như một mảng PHP bình thường. $tableData[1][‘description’];
- Facebook
- Twitter
- Pinterest
- LinkedIn
Giới thiệu về tác giả
Bob Scavilla
Đối tác + CEO
Với hơn 35 năm kinh nghiệm trong lĩnh vực công nghệ và kinh doanh, Bob là một chuyên gia lập trình, kỹ sư phần mềm và nhà tiếp thị kỹ thuật số. Đọc thêm
Bài viết này hữu ích không?
20 Nhận xét
Mohammad 27 tháng 5 năm 2020
Cảm ơn vì bài viết có giá trị và thiết thực
Làm cách nào để gửi nó tới cơ sở dữ liệu [Mysql]?
ReplyBob Scavilla Ngày 17 tháng 8 năm 2020
Mohammad, bạn có thể chuyển dữ liệu bảng trở lại PHP không? . Không dễ để ghi dữ liệu từ javascript vào bảng MySql phụ trợ. https. //www. hướng dẫn. com/php/mysql_insert_php. htm
…bob
Reply
Frank Ngày 17 tháng 6 năm 2020
Cảm ơn
ReplyKaran Chhabra Ngày 13 tháng 7 năm 2020
Thưa ông, tôi có thẻ đầu vào trong bảng và bằng cách sử dụng thẻ này, tôi không thể tìm nạp dữ liệu.
bất cứ khi nào tôi lặp lại o/p thì nó không hiển thị gì [chỉ có khoảng trống].
ReplyBob Scavilla Ngày 17 tháng 8 năm 2020
Xin chào Karan, nếu bạn có thể, vui lòng trả lời bằng một mẫu mã html có thẻ này trong đó và tôi sẽ sẵn lòng trả lời.
…bob
Reply
Chủ nhật Ngày 27 tháng 10 năm 2020
Xin chào ngài, giả sử tôi có một bảng tên là sinh viên và một tên trường matric_no và trường này có tối đa ba mục, tôi đã chọn tất cả các mục, bây giờ tôi muốn gán từng matric_no cho các biến khác nhau trong JavaScript để có thể sử dụng nó,
ReplyBob Scavilla Ngày 04 tháng 11 năm 2020
Ak, Bạn có thể muốn thử sử dụng Bản đồ. Cách sử dụng chính xác để lưu trữ dữ liệu trong Bản đồ là thông qua phương thức set[key, value]
let contact = new Map[]
contacts. set[‘Jessie’, {phone. “213-555-1234”, địa chỉ. “123 N 1st Ave”}]
Bạn cũng có thể di chuyển trực tiếp các giá trị.
var number = [65, 44, 12, 4];
var newarray = numbers. bản đồ[myFunction]
function myFunction[num] {
return num * 10;
}
Reply
Nikolas Ngày 08 tháng 11 năm 2020
Thưa ngài, cảm ơn bạn, điều này giúp ích rất nhiều
ReplyNikolas Ngày 08 tháng 11 năm 2020
Thưa ngài, cảm ơn ngài, điều này giúp ích rất nhiều…
ReplyMichal Ngày 11 tháng 12 năm 2020
Mình có Form, có 2 bảng, bảng nhỏ đầu tiên có tên tĩnh của các trường nhập văn bản, mình có thể gọi trực tiếp. nhưng vấn đề là bảng thứ hai mà tôi đã tạo, người dùng có thể thêm nhiều hàng hơn khi nhấp vào nút, với lưu ý rằng tôi phải thêm vào đó một số hàng "trống" ở vị trí mà bảng sẽ được chia khi nó được in ra, bởi vì . Vì vậy, các hàng "trống" này cần được bỏ qua trong quá trình thu thập dữ liệu cuối cùng.
Tất cả các hàng từ bảng thứ hai có tên duy nhất cho mỗi cột, với chỉ số hàng là số. số này nằm trong cột đầu tiên của bảng này, vì vậy có thể so sánh nó với số này.
Bạn có thể tư vấn cách thu thập dữ liệu từ Form như thế này không? . //pastebin. com/aD5ufdYB
ReplyBob Scavilla Ngày 11 tháng 12 năm 2020
Michal, bạn có thể kiểm tra một hàng trống như vậy không?
______10
Reply
dinesh ngày 08 tháng 2 năm 2021
Chào Bob ,
Hiện tại tôi đang sử dụng dịch vụ.
Và vấn đề của tôi là tôi đã tạo một mục danh mục và nó có một bảng giống như biến để chèn các giá trị vào đó.
Nhưng một khi mặt hàng được đặt hàng và khi tôi kiểm tra biến bảng trong phần phụ trợ thì các giá trị hoàn toàn trống.
Tôi có biết cách giải quyết vấn đề này không?
Mã số
Loại
Mô tả
Số lượng
ReplyBob Scavilla Ngày 19 tháng 4 năm 2021
Dinesh, tôi tò mò liệu bạn có giải quyết được vấn đề của mình không? . Bạn đang sử dụng jQuery hay javascript thẳng?
Hãy cho tôi biết thêm thông tin cụ thể và tôi có thể trợ giúp tốt hơn.
…bob
Reply
Rick Ngày 10 tháng 3 năm 2022
Rất thú vị và lý tưởng cho các yêu cầu của tôi, nhưng tôi không hiểu rõ về phần ajax
Nó có đi vào bên trong chức năng 'storeTblValues' hay không?
ReplyBob Scavilla Ngày 11 tháng 3 năm 2022
Xin chào Rick, tôi đã tải tất cả các tệp lên GitHub. https. //github. com/rscavilla/store-html-table-values-in-a-javascript-array
… bồng bềnh
Reply
Biến mất Ngày 20 tháng 6 năm 2022
Chào Bob,
Nếu tôi muốn gửi dữ liệu trở lại Bộ điều khiển của mình thay vì PHP, thì tôi cần phải làm gì?
ReplyKim Kalishek Ngày 21 tháng 6 năm 2022
Xin chào Avanish, tôi cho rằng bộ điều khiển của bạn là một đối tượng javascript có chức năng gọi lại? . Hãy cho tôi biết thêm chi tiết và tôi sẽ trả lời câu hỏi của bạn tốt hơn
Reply
phản hồi. lưu trữ các giá trị bảng html trong một mảng javascript. Tệp GitHub Tải xuống miễn phíYOGESH KUMAR ROY Ngày 15 tháng 11 năm 2022
Xin chào Bob, tôi có một html với 3 menu thả xuống và 3 hộp văn bản trong một hàng div và tôi đang sử dụng bộ lặp jquery để lặp lại hàng bằng cách nhấp vào nút thêm. Nhưng khi người dùng thêm tất cả các chi tiết vào các hàng div tương ứng thì cách người dùng sẽ nhận được tất cả các giá trị hộp văn bản và thả xuống, sau đó chèn tất cả những thứ đó bằng lệnh gọi jquery ajax. Cách lặp lại từng dữ liệu div rồi chèn dữ liệu vào máy chủ. Làm ơn gợi ý cho tôi
Làm cách nào chúng ta có thể lưu dữ liệu từ bảng HTML vào cơ sở dữ liệu trong PHP?
Đối với điều này, bạn cần làm theo các bước sau. .
Bước 1. Lọc các yêu cầu về biểu mẫu HTML của bạn cho trang web liên hệ với chúng tôi. .
Bước 2. Tạo cơ sở dữ liệu và bảng trong MySQL. .
Bước 3. Tạo biểu mẫu HTML để kết nối với cơ sở dữ liệu. .
Bước 4. Tạo một trang PHP để lưu dữ liệu từ dạng HTML vào cơ sở dữ liệu MySQL của bạn. .
Bước 5. Tất cả đã được làm xong
Làm cách nào để chèn dữ liệu bảng HTML vào cơ sở dữ liệu bằng jQuery?
Đầu tiên, nhiều hàng [bản ghi] sẽ được chèn vào Bảng HTML, sau đó dữ liệu từ tất cả các hàng của Bảng HTML sẽ được gửi đến Trình điều khiển bằng jQuery AJAX sẽ . Dao cạo Net MVC.
Làm cách nào để lưu dữ liệu từ biểu mẫu HTML vào cơ sở dữ liệu bằng jQuery?
Cách lưu dữ liệu vào cơ sở dữ liệu bằng jQuery và JSON trong ASP. Mạng .
Làm cách nào để lưu dữ liệu bảng HTML trong cơ sở dữ liệu?
Trường hợp sử dụng. Tạo một đơn đặt hàng mới .
Xác định truy vấn. Chúng tôi sẽ xác định hai truy vấn. .
Tạo lược đồ XML. .
Tạo biểu mẫu. .
Liên kết đến cơ sở dữ liệu. .
Xác định truy vấn SQL. .
Tạo một lược đồ XML. .
Tạo biểu mẫu. .
Liên kết đến cơ sở dữ liệu