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" />男
<input type="radio" name="sex" value="1" />女<br/>
爱好:<input type="checkbox" name="hobby[]" value="sing" />唱歌
<input type="checkbox" name="hobby[]" value="code" />写代码
<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表单进行赋值!的更多相关文章
- ajax无刷新方式收集表单并提交表单
ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...
- jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用
jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- Django中三种方式写form表单
除了在html中自己手写form表单外,django还可以通过 继承django.forms.Form 或django.forms.ModelForm两个类来自动生成form表单,下面依次利用三种方式 ...
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...
- Html Ajax上传文件,form表单下载文件
Html中的代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...
- jq form表单自动赋值
(function ($) { $.fn.extend({ initForm: function (options) { //默认参数 var defaults = { formdata: " ...
- 如何通过iframe以post方式提交form表单
以前用过一次这种技术,这次用居然忘了,现纪录下来,下次再用就来看看. 首先在html中需要准备好form和iframe元素代码如下: <form id="speaker_form&qu ...
随机推荐
- docker学习笔记 --- centos install
Docker简介: Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发 ...
- C/C++返回内部静态成员的陷阱
在我们用C/C++开发的过程中,总是有一个问题会给我们带来苦恼.这个问题就是函数内和函数外代码需要通过一块内存来交互(比如,函数返回字符串),这个问题困扰和很多开发人员.如果你的内存是在函数内栈上分配 ...
- 适合移动端与PC端的 CSS Reset - m_base.css
文章来源:http://www.cnblogs.com/HCJJ/p/6399185.html 具体代码 @charset "utf-8"; html { -ms-text-siz ...
- Asp.net GridView转换成DataTable
GridView绑定DataTable后,如何获取GridView绑定后显示的值,在项目需求需要的背景下,搜索了获取单元格显示文本的方法,然后写了一个静态方法,经过在项目中的使用,bug的修复,较为稳 ...
- 如何使用git 提交作业 收作业
如何使用git 提交作业 收作业 方法论: 今天就来用一个通俗易懂的自然模型来解释Git的commit,pull和push.不过,我们首先要理解两个名词,remote,local. remote,翻译 ...
- Mac使用技巧总结-如何独立设置Mac触摸板方向和鼠标滚轮方向?
Mac使用技巧总结 如何独立设置Mac触摸板方向和鼠标滚轮方向? 苹果Macbook的使用者都知道,Mac自带的触控板非常好用,不仅支持多手势操控,而且手感极佳,使用流畅. 但是如果对鼠标的焦距有高有 ...
- Redis复制与可扩展集群搭建【转】
本文会讨论一下Redis的复制功能以及Redis复制机制本身的优缺点以及集群搭建问题. Redis复制流程概述 Redis的复制功能是完全建立在之前我们讨论过的基于内存快照的持久化策略基础上的,也就是 ...
- 7 款顶级的开源 Web 分析软件
Web 分析无非就是 Web 流量的测量.但它并不限于测量网络流量,还包括: 分析 数据采集 为了了解和优化网页而上报网络数据 Google Analytics是最广泛使用的基于云的网络分析服务.不过 ...
- 配置ssh的config文件-为每个ssh连接创建别名
其实选来选去,还是iterm2就够用了,唯一比较麻烦的就是每次都有输入地址和用户名,其实,可以通过配置文件简写的. 可以在 ~/.ssh/config文件写上配置alias信息,以后ssh的时候根据a ...
- APACHE LOG4J™ 2
最近服务端开发需要用Log系统,于是研究了下APACHE下的Log框架. 目前日志系统,支持的语言有C++,PHP,.NET,JAVA.当然我是用Java服务端,选择用log4j吧.但突然发现log4 ...