console.log（data）到javascript中的json文件

Question

我正在用表格一頁。

我需要以下JS腳本的幫助

當我按SUBMIT時，我在console.log中獲取數據，但是我想在服務器上的json文件中或xml數據中，但是每次我更改表單中的內容以在該文件中添加新數據時，都不要創建新文件。

有什么幫助嗎？

 ;(function($) { $.fn.toJSON = function() { var $elements = {}; var $form = $(this); $form.find('input, select, textarea').each(function() { var name = $(this).attr('name') var type = $(this).attr('type') if (name) { var $value; if (type == 'radio') { $value = $('input[name=' + name + ']:checked', $form).val() } else if (type == 'checkbox') { $value = $(this).is(':checked') } else { $value = $(this).val() } $elements[$(this).attr('name')] = $value } }); return JSON.stringify($elements) }; $.fn.fromJSON = function(json_string) { var $form = $(this) var data = JSON.parse(json_string) $.each(data, function(key, value) { var $elem = $('[name="' + key + '"]', $form) var type = $elem.first().attr('type') if (type == 'radio') { $('[name="' + key + '"][value="' + value + '"]').prop('checked', true) } else if (type == 'checkbox' && (value == true || value == 'true')) { $('[name="' + key + '"]').prop('checked', true) } else { $elem.val(value) } }) }; }(jQuery)); $(document).ready(function() { $("#_save").on('click', function() { console.log("Saving form data...") var data = $("form#test-form").toJSON() console.log(data); localStorage['form_data'] = data; return false; }) }); 

Answer 1

如果您使用的是jQuery，則可以輕松地對表格進行序列化，如下所示：

$("form-selector").on("submit", function(event) {
    event.preventDefault();
    let form_data = $(this).serialize();
    console.log(form_data);
});

從您的帖子中，並不清楚您要對序列化表格數據做什么。 如果要將這些數據發布到服務器並將其另存為文件，則這是一個完全不同的主題。 您沒有提供有關服務器端技術的任何信息-是PHP，.NET，nodeJS，Python等...

好吧，無論如何...無論您使用服務器端技術如何，都可以通過jQuery的post方法（ https://api.jquery.com/jquery.post/ ）發布序列化數據：

let some_data = {field_name: 'Some name', field_surname: 'some surename', field_other: 'some other data'};
let jqxhr = $.post("http://example-host.com/service.php", some_data)
  .done(function() {
    console.log("success");
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    alert("finished");
  });

以及（客戶端JS）：

$("form-selector").on("submit", function(event) {

    event.preventDefault();
    let form_data = $(this).serialize();
    console.log('Form data', form_data);

    let posting = $.post("http://example-host.com/service.php", form_data);

    posting.done(function() {
        console.log("Form data ajax post - success");
    });

    posting.fail(function() {
        console.log("Form data ajax post - error");
    });

    posting.always(function() {
        alert("Form data ajax post - finished");
    });

});

Answer 2

已經從表格中序列化了數據

這是表格

<form id="test-form"">
    <div class="container-fluid">
            <nav class="navbar navbar-dark bg-primary">
                <a class="navbar-brand" href="/">
                        <h2><strong>Scan Vehicle Barcode</strong></h2>
                        <p>Click the <strong>button</strong> next to the input-field to start scanning an barcode</p>
                </a>
                <div class="pos-f-t">
                        <nav class="navbar navbar-dark bg-primary">
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                        </nav>
                        <div class="collapse" id="navbarToggleExternalContent">
                          <div class="bg-primary p-4">
                            <a href="/" ></a>
                          </div>
                        </div>
                      </div>
            </nav>
            <div class="input-field">
                    <div class="alert alert-info" role="alert">
                        <label for="isbn_input">EAN:</label>
                        <input id="isbn_input" class="isbn" type="text" name="barcode" />
                        <button type="button" class="btn btn-outline-success my-2 my-sm-0 scan"><i class="fa fa-barcode"></i>&nbsp;Scan Barcode</button>
                    </div>
            </div>
            <div class="alert alert-info" role="alert">
                    <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="vehiclecategory" id="inlineRadio1" value="CHASSIS">
                            <label class="form-check-label" for="inlineRadio1">CHASSIS</label>
                    </div>
                    <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="vehiclecategory" id="inlineRadio2" value="SCATTOLINI">
                            <label class="form-check-label" for="inlineRadio1">SCATTOLINI</label>
                    </div>
                    <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="vehiclecategory" id="inlineRadio3" value="VAN">
                            <label class="form-check-label" for="inlineRadio1">VAN</label>
                    </div>
            </div>
            <div class="alert alert-info" role="alert">
                <div class="col-md-4">
                        <div class="form-group">
                            <label for="sel1">Position:</label>
                            <select class="form-control" id="sel1" name="trainposition">
                                <option></option>
                                <option>A</option>
                                <option>B</option>
                                <option>C</option>
                            </select>
                        </div> 
                        <div class="form-group">
                            <label for="sel1">Wagon:</label>
                            <select class="form-control" id="sel2" name="wagonposition">
                                    <option></option>
                                    <option>34</option>
                                    <option>35</option>
                                    <option>36</option>
                                    <option>37</option>
                                    <option>38</option>
                                    <option>39</option>
                                    <option>40</option>
                                    <option>41</option>
                                    <option>42</option>
                                    <option>43</option>
                                    <option>44</option>
                                    <option>45</option>
                                    <option>46</option>
                                    <option>47</option>
                                    <option>48</option>
                                    <option>49</option>
                                    <option>50</option>
                                    <option>51</option>
                                    <option>52</option>
                                    <option>53</option>
                                    <option>54</option>
                                    <option>55</option>
                                    <option>56</option>
                                    <option>57</option>
                                    <option>58</option>
                                    <option>59</option>
                                    <option>60</option>
                                    <option>61</option>
                                    <option>62</option>
                                    <option>63</option>
                            </select>
                        </div>
                </div>
            </div>
            <div class="alert alert-info" role="alert">
                    <input type='submit' id='_save' value='SUBMIT THE VEHICLE' class="btn btn-primary btn-lg">
            </div>
    </div>
</form>

簡單的條形碼掃描儀並收集一些數據。

所有這些都運行良好，我的數據保存在console.log（）中

我希望將console.log中的數據保存在.json或.xml等文件中

服務器端nodeJS

在此處 輸入圖像描述在 此處 輸入圖像描述