jQuery通过ajax获得后台json数据给form表单赋值

6 篇文章 0 订阅
3 篇文章 0 订阅

jQuery提供了load方法可以将数据加载到页面form表单中,但有时候我需要获取后台json数据中某个值时,又需要赋值整个form表单,load方法没有回调函数所以就不行了,如果用ajax调用的话,获得后台json数据后把json数据分析出来在一个个的赋值到form表单的每个文本框中,这样未免太过复杂和太多代码,所以我根据了一些大神的回答,总结了一个很好用的jQuery函数。

jQuery-load方法调用:

$('#form').form('load',URL);


页面表单:

<span style="font-size:18px;"><form id="form" action="system/info/area_operate.html" method="post" class="default">
    				
	<input type="text" name="area_name" readOnly/>
						       
	<input type="text" name="name"/>

	<select id="type" name="type" >
		<option value="1">门店</option>
		<option value="2">总部</option>
	</select>
			           			
	<textarea class="easyui-validatebox" name="remark" cols="40" rows="5" required="false"></textarea>
</form></span>

总结的方法:

页面调用:

<span style="font-size:18px;"><script>	
<span style="white-space:pre">	</span>$.getJSON(URL,param,function(data){
	<span style="white-space:pre">	</span>alert(data.type);
	<span style="white-space:pre">	</span>$("form").setForm(data);//将ajax获得的数据设值到form表单中取
	});
</script></span>

把下面这段代码放入到jQuery中取

<span style="font-size:18px;">$.fn.setForm = function(jsonValue) {
    alert("setForm");
    var obj=this;
    $.each(jsonValue, function (name, ival) {
    	var $oinput = obj.find("input:[name=" + name + "]"); 
    	if ($oinput.attr("type")== "radio" || $oinput.attr("type")== "checkbox"){
    		 $oinput.each(function(){
                 if(Object.prototype.toString.apply(ival) == '[object Array]'){//是复选框,并且是数组
                      for(var i=0;i<ival.length;i++){
                          if($(this).val()==ival[i])
                             $(this).attr("checked", "checked");
                      }
    	 		 }else{
                     if($(this).val()==ival)
                        $(this).attr("checked", "checked");
                 }
             });
    	}else if($oinput.attr("type")== "textarea"){//多行文本框
    		obj.find("[name="+name+"]").html(ival);
    	}else{
             obj.find("[name="+name+"]").val(ival); 
        }
   });
};</span>

注意页面启动ajax方法,然后这样就可以通过ajax拿到自己想要的值,又可以将值全部赋值到form表单中了。

看了之后有木有感觉很有爱啊。生气







  • 6
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值