我有一个表单允许用户通过模仿来自其他应用的JSON数据来测试应用。想法是用户编辑表单,点击提交,从服务器接收样本响应,然后允许编辑表单并再次提交。表单由jQuery AJAX提交。我使用序列化功能收集数据并将其转换为字符串。
提交表单是第一次运行,但每次后续提交都会发送相同的数据,除非刷新页面。我认为问题是jQuery只基于$( '#graphForm ')
构建表单对象一次,并且在第二次提交时不更新字段值。或者,我没有以获取更新值的方式获取$.serializeFormJSON()
UDF中的值。
//Grab the form data, parse values and stringify
(function ($) {
$.fn.serializeFormJSON = function () {
var data = {}, form = this.serializeArray();
$.each( form, function () {
//correct the value formats and variable typing
if ( this.value.match( /^\-?\d+$/ ) ) {
this.value = parseInt( this.value );
} else if ( this.value.match( /^\-?\d+\.\d+$/ ) ) {
this.value = parseFloat( this.value );
} else if ( this.value == "null" ) {
this.value = null;
}
//fill the data object
if ( data[this.name]) {
if ( !data[this.name].push) {
data[this.name] = [data[this.name]];
}
data[this.name].push(this.value);
} else {
data[this.name] = this.value;
}
});
return JSON.stringify( data );
};
})(jQuery);
$( document ).ready(function(){
//grab form data from last session
if ( oldFormDataCookie = Cookies.get( "formData" ) ) {
oldFormData = JSON.parse( oldFormDataCookie );
$.each(oldFormData, function( name, value ) {
$( '*[name="' + name + '"]' ).val( value );
console.log('*[name="' + name + '"] : ' + value);
});
}
$( "#closeOverlay, #overlay, #overlayContent" ).click( function() {
$( "#overlay" ).fadeOut();
});
//Serialize values, submit form, show the sample, save values
$( "#graphForm" ).submit( function( e ){
e.preventDefault();
var formData = $( this ).serializeFormJSON();
$.ajax(
{
url: $( "#graphForm" ).attr( 'action' ),
type: "POST",
data: formData,
dataType: "json",
success: function( response ) {
Cookies.set("formData", formData );
console.log( response );
$( "#overlayContent" ).html( '<img src="' + response.url + '">' );
$( "#overlay" ).fadeIn();
}
}
);
});
});