submitform改为json
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了submitform改为json相关的知识，希望对你有一定的参考价值。
参考技术A 在提交form表单的时候, 可以将表单的数据转换成json 在后台页面中接受$.fn.serializeJson=function()
var serializeObj=;
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function()
if(serializeObj[this.name])
if($.isArray(serializeObj[this.name]))
serializeObj[this.name].push(this.value);
else
serializeObj[this.name]=[serializeObj[this.name],this.value];
else
serializeObj[this.name]=this.value;
);
return serializeObj;
;
ajaxForm()方法和submitForm()方法的参数
ajaxForm()方法和submitForm()方法都能接受0个或1个参数。当为单个参数时，该参数可以是一个回调函数，也可以是一个options对象，传递option对象，使它们拥有更多控制权；
(1)首先定义一个对象options，然后在里面设置参数，代码如下：
var options={
target: ‘#output1‘, //把服务器返回的内容放入id为output1的元素中
beforeSubmit: showRequest, //提交前的回调函数
success: showResponse , //提交成功的回调函数
url: url, //默认form的"action"，如果申明，会覆盖
type:type, //默认是form的method(‘get‘or‘post‘),如果申明，会覆盖
dataType: null, //‘xml‘,‘script‘,‘json‘(接收服务器返回的类型)
clearForm: true, //成功提交后，清除所有表单元素的值
resetForm: true, //成功提交后，重置所有表单元素的值
timeout:3000 //请求限制的时间，当大于三分钟，跳出请求
};
(2)定义完options对象之后，就把这个参数传给ajaForm()方法，代码如下：
$("#myform").ajaxForm(options);
或者，
$("#myform").submit(function(){
$(this).ajaxSubmit(options);
return false;
})
(3)beforeSubmit——提交前的回调函数
参数：formData为数组对象。在这里，使用$.param()方法把它转化为字符串，得到如下格式：name=lida&address=guanzhou
jqFrom是个JQuery对象，它封装表单元素
options就是options对象
function(formData,jqFrom,options){
var queryString=$.param(formData);
return false;
}
(4)success——提交后的回调函数
function showResponse(responseText,statusText,xhr,$form){
//responseText,statusTex比较常用；
//当dataType属性被设为xml时，把responseText改成responseXML;
}
案例
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>核心方法--ajaxForm()和ajaxSubmit()</title>
</head>
<body>
<form id="myForm" action="ajax.php" method="post">
名称: <input type="text" name="username"/></br>
地址: <input type="text" name="address"/></br>
自我介绍: <textarea name="comment"></textarea></br>
<input type="submit" value="提交" id="test" /></br>
<div id="output1"></div>
</form>
<script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
var options={
beforeSubmit: showRequest, //提交前的回调函数
success: showResponse , //提交成功的回调函数
dataType: null, //‘xml‘,‘script‘,‘json‘(接收服务器返回的类型)
timeout:3000 //请求限制的时间，当大于三分钟，跳出请求
};
//提交前的回调函数
function showRequest(formData,jqForm,options){
/*在这里需要对表单进行验证，如果不符合规则，
则返回false来阻止表单提交，直到符合规则为止
*/
var queryString=$.param(formData);
return true;
}
// 提交成功的回调函数
function showResponse(responseText,statusText,xhr,$form){
alert("状态："+statusText);
$("#output1").append(responseText);
}
//方法1：
// $("#myForm").ajaxForm(options);
//方法2：
$(‘#myForm‘).submit(function() {
$(this).ajaxSubmit(options);
return false; //禁止表单默认提交
});
})
</script>
</body>
</html>
以上是关于submitform改为json的主要内容，如果未能解决你的问题，请参考以下文章
submitForm 上的 Angular 2 RxJS 可观察取消订阅
React Formik 在 <Formik /> 之外使用 submitForm