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"}

时间: 2024-07-28 22:47:49

ajax无刷新方式对form表单进行赋值!的相关文章

JS 提交表单2-Query Ajax post(json数组,form表单经serialize()序列化,html拼接)

$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上传文件的操作:          //第1次,post 只上传文件,返回文件名name          //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件          //(如果有其他参数,也可以通过第2次一并上传) 图片文件

jq form表单自动赋值

(function ($) { $.fn.extend({ initForm: function (options) { //默认参数 var defaults = { formdata: "", isDebug: true //是否需要调试,这个用于开发阶段,发布阶段请将设置为false,默认为false,true将会把name value打印出来 } //如果传入的json字符串,将转为json对象 var tempData = ""; if ($.type(o

ajax和form表单,django的中间件

1.前后端传输编码格式contentType: urlencoded: 对应的数据格式:name=XXX&password=66 后端获取数据:request.POST django会将urlencoded编码的数据解析自动放到request.POST formdata: form表单传输文件的编码格式 后端获取文件格式数据:request.FILES 后端获取普通键值对数据:request.POST application/json ajax发送json格式数据 需要注意的点 编码与数据格式要

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

AJAX PHP无刷新form表单提交的简单实现(推荐)

下面小编就为大家带来一篇AJAX PHP无刷新form表单提交的简单实现(推荐).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 ajax.php <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

DWZ框架Ajax无刷新表单提交处理流程

DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应的处理 注意: DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转). 表单提交后服务器操作失败了,客户端接收statusCode和message后给出错误提示,表单

Ajax无刷新提交表单和显示

ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&