当我们使用form表单作为数据提交的方式时,常常需要将表单数据转换为Json格式进行提交。下面是基于jQuery的form表单转Json提交的方法。
在jQuery中,可以使用serialize()方法将一个表单元素的值转化为查询字符串格式。而JavaScript提供了eval()方法,可以将字符串转换为JSON对象格式。因此,我们可以通过下面的代码将form表单序列化为JSON格式:
$('form').submit(function(e) {
e.preventDefault();
var formObj = $(this),
formURL = formObj.attr('action'),
formData = formObj.serialize(),
formJSON = '{"' + formData.replace(/=/g, '":"').replace(/&/g, '","') + '"}';
$.ajax({
url: formURL,
type: 'POST',
data: formJSON,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function(data) {
console.log(data);
},
error: function() {
console.log('An error occurred.');
}
});
});
除了使用serialize()方法,我们也可以用serializeArray()方法将表单元素值进行序列化。该方法将表单元素的名称和值一起序列化。因为这种方法返回数组,因此可以更多地灵活处理序列化数据。在处理序列化后的数据时,我们可以通过for循环进行迭代。下面是基于serializeArray()方法的实例如下:
$('form').submit(function(e) {
e.preventDefault();
var formObj = $(this),
formURL = formObj.attr('action'),
formData = formObj.serializeArray(),
formJSON = {'data': {}};
$.each(formData, function(index, input) {
formJSON['data'][input.name] = input.value;
});
$.ajax({
url: formURL,
type: 'POST',
data: JSON.stringify(formJSON),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function(data) {
console.log(data);
},
error: function() {
console.log('An error occurred.');
}
});
});
在上述代码中,我们通过遍历serializeArray()方法返回的数组来构建一个新的JSON对象。该方法返回的结果是如下的数据结构:[{name: '[form-field-name]', value: '[form-field-value]'}]。
下面通过两个具体的示例来说明如何使用上述两种方式进行表单转Json提交。
<form method="post" id="myform" action="http://localhost:8888/example">
<label for="name">名称:</label>
<input type="text" name="name" id="name"/>
<label for="content">内容:</label>
<textarea name="content" id="content"></textarea>
<button type="submit">提交</button>
</form>
$('#myform').submit(function(e) {
e.preventDefault();
var $form = $(this);
var url = $form.attr('action');
var data = $form.serialize();
$.ajax({
url: url,
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
});
});
<form method="post" id="myform" action="http://localhost:8888/example">
<label for="name">名称:</label>
<input type="text" name="name" id="name"/>
<label for="age">年龄:</label>
<input type="text" name="age" id="age"/>
<button type="submit">提交</button>
</form>
$('#myform').submit(function(e) {
e.preventDefault();
var $form = $(this);
var url = $form.attr('action');
var data = $form.serializeArray();
// 构建一个新的JSON对象
var postData = {};
$.each(data, function(i, field){
postData[field.name] = field.value;
});
$.ajax({
url: url,
type: 'POST',
data: JSON.stringify(postData),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
});
});
希望以上示例能够帮助你理解如何用代码实现form表单转Json提交的功能。
本文链接:http://task.lmcjl.com/news/9715.html