jsp form 自动填充

Ring风

浏览: 65935 次
性别:
来自: 上海

最近访客更多访客>>

zhenglong2006

cutesweetbanana

qupei2u

_wyh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSP JS JQuery

JavaScript Oracle JSP Ajax jQuery

我们在做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中创建的对象属性，填充到对应的控件中。

逻辑很简单。

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

分享到：

mysqldump | 浏览器缓存更新js

2011-06-14 15:22
浏览 3433
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论