07/09/2018, 15:27

Tìm hiểu về JSON HTML

Bạn có thể dễ dàng dịch JSON sang JavaScript. Và JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn. Bảng trong HTML Tạo một bảng HTML với dữ liệu nhận được như là JSON: obj = { "table":"customers", "limit":20 }; dbParam = ...

Bạn có thể dễ dàng dịch JSON sang JavaScript. Và JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn.

Bảng trong HTML

Tạo một bảng HTML với dữ liệu nhận được như là JSON:

obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
            txt += "<tr><td>" + myObj[x].name + "</td></tr>";
        }
        txt += "</table>" 
        document.getElementById("demo").innerHTML = txt;
    }
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

Bảng HTML động

Làm cho bảng HTML dựa trên giá trị của một trình đơn thả xuống:

<select id="myselect" onchange="change_myselect(this.value)">
    <option value="">Choose an option:</option>
    <option value="customers">Customers</option>
    <option value="products">Products</option>
    <option value="suppliers">Suppliers</option>
</select>

<script>
function change_myselect(sel) {
    var obj, dbParam, xmlhttp, myObj, x, txt = "";
    obj = { "table":sel, "limit":20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myObj = JSON.parse(this.responseText);
            txt += "<table border='1'>"
            for (x in myObj) {
                txt += "<tr><td>" + myObj[x].name + "</td></tr>";
            }
            txt += "</table>" 
            document.getElementById("demo").innerHTML = txt;
        }
    };
    xmlhttp.open("POST", "json_demo_db_post.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
}
</script>

Danh sách thả xuống HTML

Thực hiện một danh sách HTML thả xuống với dữ liệu nhận được như là JSON:

obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<select>"
        for (x in myObj) {
            txt += "<option>" + myObj[x].name;
        }
        txt += "</select>" 
        document.getElementById("demo").innerHTML = txt;
    }
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
Bài liên quan

Tìm hiểu về JSON PHP

Việc sử dụng JSON phổ biến là đọc dữ liệu từ máy chủ web và hiển thị dữ liệu trong một trang web. Bài viết này sẽ hướng dẫn bạn cách trao đổi dữ liệu JSON giữa máy client và máy chủ PHP. Tệp tin PHP PHP có một số hàm được tích hợp sẵn để xử lý JSON. Các đối ...

Bùi Văn Nam viết 15:28 ngày 07/09/2018

Tìm hiểu về JSON HTML

Bạn có thể dễ dàng dịch JSON sang JavaScript. Và JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn. Bảng trong HTML Tạo một bảng HTML với dữ liệu nhận được như là JSON: obj = { "table":"customers", "limit":20 }; dbParam = ...

Bùi Văn Nam viết 15:27 ngày 07/09/2018

Tìm hiểu về Simple HTML Dom

Simple Html Dom là thư viện của Php giúp cho việc chúng ta có thể lấy các thuộc tính của các thẻ HTML trong 1 website. Chúng ta có thể lấy trực tiếp thông tin từ link web hoặc là từ 1 chuỗi, đồng thời ta có thể lấy về, và sửa đổi nội dung. Nghe có vẻ như kiểu dễ dàng lấy thông tin từ 1 trang web ...

Hoàng Hải Đăng viết 14:40 ngày 12/08/2018

TÌm hiểu về JSON Web Token

It's that time of the month again, time for yet another last minute report, in an desperate attemp to save our precious 2-days salary. And again, i wish this would be the last time i have to do so. Tình cờ đọc lại một bài report của chính mình viết từ khá lâu trước đây Tản mạn về API design, ...

Bùi Văn Nam viết 14:40 ngày 12/08/2018

Tìm hiểu về json web token (JWT)

JSON Web Token là gì? JSON Web Mã (JWT) là một chuẩn mở (RFC 7519) định nghĩa một cách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa các bên dưới dạng đối tượng JSON. Thông tin này có thể được xác minh và đáng tin cậy vì nó có chứa chữ ký số. JWTs có thể được ký bằng một thuật ...

Bùi Văn Nam viết 13:20 ngày 12/08/2018
0