我正在处理表单的一页。
我需要以下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;
})
});
答案 0 :(得分：0)
如果您使用的是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");
});
});
答案 1 :(得分：0)
已经从表格中序列化了数据
这是表格
<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> 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
