jquery获取form表单数据的方法

来源：互联网 2023-03-16 23:54:50 197

serialize() 方法通过序列化表单值

工具/原料

电脑

方法/步骤

搜索查询时，将搜索条件单独放入form表单中，利用jquery获取表单中全部的内容，利用jquery自身的方法serialize（）将其转换为字符串然后将字符串转换为json对象

jquery获取form表单数据的方法

body id="form">form action="">First name: input type="text" name="fn" value="Bill" />br />Last name: input type="text" name="la" value="Gates" />br />input name="a" type="radio" value="1" />1input name="a" type="radio" value="2" />2input name="a" type="radio" value="3" />3input name="a" type="radio" value="4" />4

jquery获取form表单数据的方法

input name="b" type="checkbox" value="11"/>11input name="b" type="checkbox" value="22"/>22input name="b" type="checkbox" value="33"/>33input name="b" type="checkbox" value="44"/>44/form>

button>序列化表单值/button>div>/div>/body>/html>

jquery获取form表单数据的方法

此方法可以很方便的接收到前端的数据，

function changeAjaxFormData(formObj){var data=formObj.serialize();data= decodeURIComponent(data,true);// 防止中文乱码var json=formToJson(data);// 转化为jsonreturn JSON.parse(json);}

jquery获取form表单数据的方法

function formToJson(data) { data=data.replace(/&/g,"\",\"").replace(/=/g,"\":\"").replace(/\ /g," ").replace(/[\r\n]/g,"br>"); data="{\"" data "\"}"; return data;}

jquery获取form表单数据的方法

$('#btn').click(function(){formJson = changeAjaxFormData($('#searchForm'));$('#table').jqGrid("setGridParam",{postData:formJson}); $('#table').jqGrid("setGridParam",{page:1}); $('#table').jqGrid("setGridParam",{url: url}).trigger("reloadGrid");

})

jquery获取form表单数据的方法