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

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);
	});
</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表单中了。

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

时间: 2024-08-17 12:14:27

jQuery通过ajax获得后台json数据给form表单赋值的相关文章

js获取form表单数据和form表单赋值

$.fn.extend({// 调用方式:$("xxxxx").getform(); getform: function () { var obj = {}; var array = $(this).serializeArray(); $.each(array, function () { obj[this.name] = this.value; }); return obj; }, // 调用方式: $("xxx").setform(json); setform:

jquery通过ajax方法获取json数据不执行success

1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success

jquery通过ajax方法获取json数据不执行success回调

问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号!

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

如何把整张表格的数据通过form表单的方式传回后台

开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现了整个功能. 思考过程: 思考过程中,想过用ajax,感觉还是太麻烦了,放弃. 第二个,是找网上现成的接口,比如表单大师之类的...但是找来找去找不到,没有符合要求的接口.放弃. 第三个,想到python万能的包来实现,还是相信python的包是万能的23333,百度来百度去,找不到.放弃. 最后还

前端 ajax 获取后台json数据 解析

先贴代码 function edit(node) { var customerid = $(node).parents("tr").children().eq(0).text(); alert(customerid) $.ajax({ type: "post", url: "/IsCreateCoustomer/AddButtes?id=" + customerid, // dataType: "json", //这个数据传输

Json 入门例子(form表单)【0】

<script> $(function () { var aa = $("#fm").serialize().replace(/\+/g, ""); var ac = decodeURIComponent(aa); $("#fm").click(function () { alert(ac); }); }); </script> <form id="form1" name="form1&

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

详谈 Jquery Ajax 异步处理Json数据.

详谈 Jquery Ajax 异步处理Json数据.