Bạn đang xem : jquery tạo đối tượng json

Tiếp tục với công việc tạo Đơn đăng ký việc cần làm , đoạn mã tuần này là về cách gửi biểu mẫu bằng jQuery. Đoạn mã này mở rộng những gì được đề cập trong hướng dẫn trước, vì vậy nếu bạn mới tham gia với chúng tôi, bạn có thể muốn đọc trước.

JSON – Ký hiệu đối tượng JavaScript

Tuần trước, chúng tôi đã biết cách chặn sự kiện gửi của một biểu mẫu, tuần này chúng tôi sẽ hoàn thành phương pháp đó và sử dụng jQuery để thực hiện gửi cho chúng tôi. Có một số cách để gửi lại dữ liệu, chúng tôi sẽ tập trung vào JSON . JSON là viết tắt của JavaScript Object Notation, nó là một phương pháp chỉ định dữ liệu có cấu trúc. Như tên gọi của nó, nó phản ánh ký hiệu đối tượng JavaScript bình thường.

{
    key1: 'value1',
    key2: 'value2'
}

Nó cũng có thể được lồng vào nhau để tạo ra các cấu trúc phức tạp hơn

{
    key1: 'value1',
    key2: 'value2',
    cha mẹ1: {
        child1: 'giá trị của child1',
        child2: 'giá trị của child2',
        cháu: {
            cháu1: 'giá trị của cháu1',
            cháu2: 'giá trị của cháu2',
        }
    }
}

Tạo dữ liệu JSON của chúng tôi

jQuery cung cấp một phương thức rất đơn giản giúp chúng tôi tạo đối tượng dữ liệu JSON của mình. Phương thức này là serializeArray . Để sử dụng nó, tất cả những gì chúng ta sẽ tạo một phương thức JavaScript mới và chuyển vào tham chiếu biểu mẫu của chúng ta

function ConvertFormToJSON (form) {
}

Đối với phương pháp mới này, chúng tôi sẽ thêm những điều sau

function ConvertFormToJSON (form) {
    var array = jQuery (form) .serializeArray ();
}

Bây giờ chúng ta có một mảng JavaScript chứa từng phần tử biểu mẫu, bây giờ tất cả những gì chúng ta phải làm là lặp qua các mục mảng và tạo đối tượng JSON của chúng ta

Xem Thêm  Stacking Ensemble Machine Learning With Python - interval tree

function ConvertFormToJSON (form) {
    var array = jQuery (form) .serializeArray ();
    var json = {};
    
    jQuery.each (mảng, hàm () {
        json [this.name] = this.value || '';
    });
    
    trả về json;
}

Điều này sẽ tạo một đối tượng JavaScript trông giống như sau:

json = {
    new-task-color: "# 000000",
    new-task-date: "25/04 / 2013T08: 00: 00",
    new-task-desc: "Tạo hướng dẫn ứng dụng đơn giản cần làm trên developerdrive.com",
    new-task-email: "you@everyone.com",
    new-task-name: "Tạo một ứng dụng đơn giản để làm",
    new-task-priority: "2"
}

Bây giờ bằng cách sử dụng phương thức jQuery Ajax , chúng tôi sẽ gửi dữ liệu đến tệp submit.php (không tồn tại) của chúng tôi.

jQuery (document) .on ('ready', function () {
    jQuery ('form # add-new-task'). bind ('submit', function (event) {
        event.preventDefault ();

        var form = this;
        var json = ConvertFormToJSON (biểu mẫu);

        $ .ajax ({
            gõ: "ĐĂNG",
            url: "submit.php",
            dữ liệu: json,
            dataType: "json"
        });

        var tbody = jQuery ('# to-do-list & gt; tbody');
        
        tbody.append ('& lt; tr & gt; & lt; th scope = "row" style = "background-color:' + this ['new-task-color']. value +
            '"& gt; & lt; input type =" checkbox "/ & gt; & lt; / th & gt; & lt; td & gt;' + this ['new-task-date']. value +
            '& lt; / td & gt; & lt; td & gt;' + this ['new-task-priority']. value + '& lt; / td & gt; & lt; td & gt;' + this ['new-task-name']. value +
            '& lt; / td & gt; & lt; td & gt;' + this ['new-task-desc']. value + '& lt; / td & gt; & lt; td & gt;' + this ['new-task-email']. value + '& lt; / td & gt; & lt; / tr & gt;');
        
        trả về true;
    });
});

Chúng tôi chỉ muốn cập nhật bảng nếu quá trình gửi thành công, vì vậy chúng tôi sẽ xâu chuỗi 2 chức năng khác vào phương pháp AJAX của chúng tôi cho các sự kiện thành công và thất bại.

jQuery (document) .on ('ready', function () {
    jQuery ('form # add-new-task'). bind ('submit', function (event) {
        event.preventDefault ();
        
        var form = this;
        var json = ConvertFormToJSON (biểu mẫu);
        var tbody = jQuery ('# to-do-list & gt; tbody');

        $ .ajax ({
            gõ: "ĐĂNG",
            url: "submit.php",
            dữ liệu: json,
            dataType: "json"
        }). done (function () {
            tbody.append ('& lt; tr & gt; & lt; th scope = "row" style = "background-color:' + form ['new-task-color']. value +
                '"& gt; & lt; input type =" checkbox "/ & gt; & lt; / th & gt; & lt; td & gt;' + form ['new-task-date']. value +
                '& lt; / td & gt; & lt; td & gt;' + form ['new-task-priority']. value + '& lt; / td & gt; & lt; td & gt;' + form ['new-task-name']. value +
                '& lt; / td & gt; & lt; td & gt;' + form ['new-task-desc']. value + '& lt; / td & gt; & lt; td & gt;' + biểu mẫu ['new-task-email']. value + '& lt; / td & gt; & lt; / tr & gt;');
        }). fail (function () {
            alert ("Không thêm được việc cần làm");
        });

        trả về true;
    });
});

Để kiểm tra điều này, bạn có thể tạo một tệp submit.php mẫu hoặc thay vì phương thức done, bạn có thể sử dụng ‘always’. Bản trình diễn đính kèm và tệp tải xuống được định cấu hình để sử dụng phương pháp này.

Xem Thêm  Tôi nên đặt thẻ

By ads_php