ajax无刷新方式对form表单进行赋值！

/*** 把json数据填充到from表单中*/
<form id="editForm" action="user.php">用户名:<input type="text" name="usrname" /><br/>地址:<input type="text" name="address" /><br/>性别:<input type="radio" name="sex" value="0" />男&nbsp;　　　　  <input type="radio" name="sex" value="1" />女<br/>爱好:<input type="checkbox" name="hobby[]" value="sing" />唱歌&nbsp;<input type="checkbox" name="hobby[]" value="code" />写代码&nbsp;<input type="checkbox" name="hobby[]" value="trance" />发呆</form>

以下是JS方法用于对form表单进行赋值（通用方法）

$.fn.formEdit = function(data){return this.each(function(){var input, name;if(data == null){this.reset(); return; }for(var i = 0; i < this.length; i++){  input = this.elements[i];//checkbox的name可能是name[]数组形式name = (input.type == "checkbox")? input.name.replace(/(.+)\[\]$/, "$1") : input.name;if(data[name] == undefined) continue;switch(input.type){case "checkbox":if(data[name] == ""){input.checked = false;}else{//数组查找元素if(data[name].indexOf(input.value) > -1){input.checked = true;}else{input.checked = false;}}break;case "radio":if(data[name] == ""){input.checked = false;}else if(input.value == data[name]){input.checked = true;}break;case "button": break;default: input.value = data[name];}}});
};

调用方式：

$json = { "usrname":"张三", "address":"湖北钟祥", "sex": "1", "hobby":["sing", "trance"]};

$('#editForm').formEdit($json);

调用代码解释说明：

$(form表单).formEdit(json数据);
json数据说明:基本格式{inputname: value}, 具体类型{"text":"aaa", "checkbox":[1,2,3], "radio":"10"}

ajax无刷新方式对form表单进行赋值！相关推荐

jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单菜单:  JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...
jQuery ajax 请求和 Submit 提交 form 表单
前台: <title>modify approver Password</title> <script type="text/javascript"& ...
layui 父页面向弹出框中的子页面form表单进行赋值
1 ,父页面js layer.open({type: 2,title: '修改数据',shadeClose: false,shade: 0.8,area: ['60%', '60%'],content ...
ajax提交成功清空表单,Ajax提交数据后，清空form表单
按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...
ajax提交表单跨域啊,form表单提交没有跨域问题，但ajax提交存在跨域问题
浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...

ajax无刷新方式对form表单进行赋值！

ajax无刷新方式对form表单进行赋值！相关推荐

最新文章

热门文章