通过ajax提交带有多个字段的表单-如何将数据格式化为JSON
Submitting form with multiple fields via ajax - how to format the data into JSON?
我有一个包含多个数据项的表单。Ajax(位于底部)要求将传递给它的数据捆绑在一起。如何将表单字段中未提交的文本打包成JSON对象发送到Ajax?
<div id="editUserPinForm" class="ui raised segment signin">
<div class="cmborder">
<div class="form_heading">Edit Your Pin</div>
<form>
<div class="ui form attached fluid segment">
<div class="two fields">
<div class="field">
<label>Title</label>
<input type="text" name="pin[title]" class="ui input" value="{{pin/title}}">
</div>
<div class="field">
<label>Activity</label>
<input type="text" name="pin[activity]" class="ui input" value="{{pin/activity}}">
</div>
</div>
<div class="field">
<label>Description</label>
<textarea name="pin[description]" class="ui input">{{pin/description}}</textarea>
</div>
<div class="inline field">
<input type="hidden" name="pin[guideID]" value="{{pin/guide_id}}">
</div>
<div class="inline field">
<input type="hidden" name="pin[lat]" value="{{pin/lat}}">
</div>
<div class="inline field">
<input type="hidden" name="pin[long]" value="{{pin/long}}">
</div>
<div class="inline field">
<input type="submit" value="Submit Changes" class="ui blue submit button">
</div>
</div>
</form>
<span class='close_message' id="messageclose">×</span>
</div>
</div>
<script>
$( "#messageclose" ).on("click", function() {
$('#editUserPinForm').fadeOut();
});
$("#editUserPinForm").submit(function() {
$.ajax({
type: "PATCH",
url: "api/pins/{{pin/id}}",
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify( {pin:{description:value}})
}).success: function(response){
alert(response); //response from server.
};
});
</script>
我使用了jQuery Serialize,它的工作效果很好。
https://github.com/macek/jquery-serialize-object
的问题
JSON.stringify($(this).serializeArray());
它将数组转换为JSON,但数组添加了"名称"answers"值",这使得生成的JSON非常难以使用。
您可以使用内部jQuery$('#domNode').serializeArray(),它将返回对象数组中所有输入的数组。它遵循W3C模式,为成功的控件返回有效的输入,这意味着它不会返回禁用的控件。
参考:
https://api.jquery.com/serializeArray/
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
为了将表单作为json字符串发送。您必须创建一个具有输入名称和值对的数组,方法是收集每个输入名称和价值,将它们关联到包含名称和价值对的对象数组中:
$("#editUserPinForm").submit(function() {
jQuery("#editUserPinForm").find("input").each( function()
{
var form_data = new Array(); // The array that'll contain inputs names and values
form_data.push( { $(this).attr('name') : $(this).val() } );
var form_jsoned = JSON.stringify(form_data);
// Then here you can call ajax and send the json data
$.ajax({
type: "PATCH",
url: "api/pins/{{pin/id}}",
contentType: 'application/json',
dataType: 'json',
data: form_jsoned
}).success: function(response){
alert(response); //response from server.
};
}
}
相关文章:
- Highcharts系列.数据数据类型限制
- 如果数据的格式略有损坏,是否仍然可以确定其文件类型
- 在没有jsonp的情况下从另一个域获取数据(json格式)
- 在jQuery mobile/java脚本的TextBoxes中动态添加未加载的数据.数据具有[object HTMLI
- 如何在android中显示实时雅虎金融股票数据..json格式如下所示
- D3:“SVG4601:SVG 路径数据的格式不正确,无法完全解析
- 如何在 Javascript 中更改 JSON 数据的格式
- 此数据的格式是什么?是自定义格式吗?
- 如何将数据 URL 格式的文件正确保存到隔离存储
- 使用 YUI 3 设置输入数据的格式
- 在呈现数据之前设置数据的格式
- 从数据日期格式中获取日期和月份
- 使用人力车绘制时间序列图.输入数据的格式
- 设置谷歌折线图工具提示数据的格式以使用百分比
- 通过jQuery向ASP发送数据.混合格式的Net MVC 2控制器
- Ajax数据发送格式
- 将JSON数据重新格式化为Javascript对象
- 如何读取数据JSON格式数组的字符串数据
- 使用google脚本操作数据条件格式和数据验证
- 对于拥有Cocoa和JS客户端的web服务来说,最简单的数据交换格式是什么?