您的位置: 首页  >  文章  >  jsp form 自动填充

jsp form 自动填充

分类: 文章 • 2024-08-11 17:25:58

我们在做ajax 效果的时候，经常遇到类似的需求：从后台返回一个对象。一般是json格式的对象。 这时候需要将对象内容自动填充到页面中。
闲话少聊，下面是代码。
 
<!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="Content-Type" content="text/html; charset=utf-8" /> 
<title>根据对象填充到对象的form中</title> 
<script type="text/javascript" src="js/jquery-1.4.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        // 初始化一个对象 该对象的属性要和form 对应的值对应 
        var obj = new Object(); 
        obj.username ="randy"; 
        obj.book="01,02"; 
        obj.sex="girl"; 
        obj.color="red"; 
        obj.addition="哥写的不是代码，是寂寞"; 
         
        $(":button").click(function(){ 
             
             for(var attr in obj){ 
            
              if(typeof(obj[attr])=='function'){                     
                continue; 
              } 
              var $input = $("#myform    :input[name='"+attr+"']"); 
              var type = $input.attr("type");                
              if(type=="checkbox" ||type=="radio"){ 
                    
                  var avalues = obj[attr].split(","); 
                    
                  for(var v=0; v<avalues.length;v++){ 
                    $input.each(function(i,n){ 
                        var value = $(n).val();                         
                        if(value == avalues[v]){                        
                          $(n).attr("checked","checked"); 
                        } 
                    }); 
                } 
              }else{ 
                $input.val(obj[attr]); 
              } 
                
            }            
             
             
             
             
        /*    var $input = $("#myform    :input"); 
              $.each($input,function(i,n){ 
                var type = $(n).attr("type");                
                alert(type); 
              }); 
        */ 

        }); 
    }); 

</script> 
</head> 

<body> 
<form id="myform" method="get"> 

<table width="50%" border="0"> 
    <tr> 
        <td> 
    姓名：  </td> 
        <td> 
            <input type="text" name="username" /></td> 
        </tr> 
    <tr> 
    <td> 
      书籍：    </td> 
    <td> 
      <input type="checkbox" name="book" value="01"/> 
            jquery 
      <input type="checkbox" name="book" value="02"/> 
         java 
      <input type="checkbox" name="book" value="03"/> 
         oracle    </td> 
        </tr> 
    <tr> 
          <td> 
      性别：    </td> 
    <td> 
      <label> 
      <input type="radio" name="sex" value="boy" /> 
         男</label> 
      <label> 
      <input type="radio" name="sex" value="girl" /> 
         女</label>    </td> 
    </tr> 
    <tr> 
        <td> 
    颜色：  </td> 
        <td>    <label for="select"></label> 
         <select name="color" id="select"> 
        <option>请选择</option> 
        <option value="red">红</option> 
        <option value="green">绿</option> 
        <option value="blue">蓝</option> 
         </select>            </td> 
    </tr> 
    <tr> 
         <td> 
    备注：  </td> 
        <td> 
    <label for="textarea"></label> 
            <textarea name="addition" ></textarea>  </td> 
    </tr> 
    <tr> 
        <td colspan="2"> 
            <input type="button" name="padding" value="填充"/> 
    </td> 
        </tr> 
</table> 


</form> 

</body> 
</html> 
 
 
下面是效果图：就是将 js中创建的对象属性，填充到对应的控件中。
逻辑很简单。
jsp form 自动填充

本文出自 “简单” 博客，请务必保留此出处http://randy2009.blog.51cto.com/764602/281514

 

相关推荐