我想用jquery或者JS实现这样一个功能怎么实现！求大神

    左面的详细信息和基本信息是一个JSP,右面的人员查询和自定是一个JSP,
而右面的JSP是<iframe>标签在左面的JSP里的，我想实现的功能就是右面的JSP页面查询出了数据，我在左面的jsp页面里的想添加的地方一点就可以把右面的查询出来的数据能带过去，不用再手动打字，我尝试了一下没做出来，求大神指导！

9 个解决方案

#1

这是左面的jsp源码
 function ins()
 {
    confirm(function()
   {
    nullTo0('fatherId');
    nullTo0('motherId');
    nullTo0('loverId');
    nullTo0('building_id');
        var $form  = $('#addForm');
    $form.attr("action","<%=request.getContextPath()%>/peopleins.action");
    $("#ajaxreason").empty();
 $.ajax({
              type:'POST',
              url:$form.attr("action"),
              data:$form.serializeArray(),
  dataType:"json",
  cache: false,
  success: function(json)
  {
   $("#ajaxreason").append(json.reason);
   $("#ajaxtip").fadeIn(200);
   if(json.result == 200)
   {
   $('#tr_'+i).remove();
   }
   sd_remove();
  },
  error:function()
  {
    $("#ajaxreason").append("服务器连接失败");
   $("#ajaxtip").fadeIn(200);
  }
          });
   });
  
   /*$(function() { //拾取 
    var rightiframe = $(window.frames['right_iframe'].document);
    $('#autobtn').click(function() {
        var val = $(rightiframe).find('input[checked="checked"]').val();
        $('#fatherId').val(val);
        alert(val);
    });
  });*/
 
 
 
 }  
 function nullTo0(iname)
 {
  var nn = $('#'+iname).val();
  if(nn == '')
  $('#'+iname).val(0);
 }
  
</script>
<table>
<tr>
<td>
<form action ="#" id="addForm">

    <div class="formbody">
    <div id="usual1" class="usual"> 
    <div class="itab">
   <ul> 
    <li><a href="#tab1" class="selected">基本信息</a></li> 
    <li><a href="#tab2">详细信息</a></li> 
   </ul>
    </div> 
    
   <div id="tab1" class="tabson">
   <table>
        <tr>
        <td width="13%">姓名</td>
        <td width="15%"><input name="peopleViewModel.name" type="text" value="${peopleViewModel.name}" class="dfinput" style="width:100%"/></td>
        <td width="13%">性别</td>
        <td width="13%">
        <div class="vocation" style=" height:32px;">
        <select name="peopleViewModel.sex"  class="select3">
    <option value="1">男</option>
    <option value="2">女</option>
    </select>
</div>   
    </td>
        <td width="13%">民族</td>
        <td width="13%">
        <div class="vocation" style=" height:32px;">
        <select name="peopleViewModel.nation" class="select3">
    <option value="1">汉族</option>
    <option value="2">其他</option>
    </select>
</div>
</td>
        <td width="20%" rowspan=4><img >添加</img>
        </td>
        </tr>
        
        
        <tr>
        <td>出生日期</td>
        <td><input type="text" name="peopleViewModel.birth" value="${peopleViewModel.birth}"  id="datepicker" readonly class="dfinput"  style="width:100%"/></td>
        <td>婚姻状况</td>
        <td>
        <div class="vocation" style=" height:32px;">
        <select name="peopleViewModel.marital_status" class="select3">
    <option value="1">全部</option>
    <option value="2">全部</option>
    <option value="3">全部</option>
    <option value="4">全部</option>
    <option value="5">全部</option>
    <option value="6">其他</option>
    </select>
</div>
</td>
        <td>血型</td>
        <td>
        <div class="vocation" style=" height:32px;">
        <select name="peopleViewModel.blood" class="select3">
    <option value="1">A型</option>
    <option value="2">B型</option>
    <option value="3">O型</option>
    <option value="4">AB型</option>
    </select>
</div>
</td>
        </tr>
        
        <tr>
        <td>证件类型</td>
        <td>  
        <div class="vocation" style="height:32px; ">
        <select name="peopleViewModel.card_type" class="select3">
    <option value="1">身份证</option>
    </select>
</div>
</td>
        <td>证件号码</td>
        <td colspan=3 ><input type="text" name="peopleViewModel.id_card" value="${peopleViewModel.id_card}" class="dfinput"  style="width:100%"/></td>
        </tr>
        
        
        <tr>
        <td>政治面貌</td>
        <td>
        <div class="vocation" style="height:32px; ">
        <select name="peopleViewModel.political_status" class="select3">
    <option value="1">群众</option>
    <option value="2">党员</option>
    <option value="3">团员</option>
    </select>
</div>
</td>
        <td>文化程度</td>
        <td>
        <div class="vocation" style="height:32px; ">
        <select name="peopleViewModel.education" class="select3">
    <option value="1">本科</option>
    <option value="2">大专</option>
    <option value="3">中专</option>
    <option value="4">高中</option>
    <option value="5">初中</option>
    <option value="6">小学</option>
    </select>
</div>
</td>
        <td>籍贯</td>
        <td><input name="peopleViewModel.origo" value="${peopleViewModel.origo}" type="text" class="dfinput" style="width:100%"/></td>
        </tr>
    </table>
    
    </div> 
    
    
   <div id="tab2" class="tabson">
<table>
        <tr>
        <td width="16%" colspan=4>固定电话</td>
        <td width="17%" colspan=4><input name="otherViewModel.telephone"  value="${otherViewModel.telephone}" type="text" class="dfinput" style="width:100%"/></td>
        <td width="16%" colspan=4>移动电话</td>
        <td width="17%" colspan=4><input name="otherViewModel.mobile"     value="${otherViewModel.mobile}" type="text" class="dfinput" style="width:100%"/></td>
        <td width="16%" colspan=4>电子邮箱</td>
        <td width="17%" colspan=4><input name="otherViewModel.email" value="${otherViewModel.email}" type="text" class="dfinput" style="width:100%"/></td>
        </tr>
        

        <tr>
        <td colspan=4>父亲姓名</td>
        <td colspan=4><input type="text" name="otherViewModel.fatherId" id="fatherId" readonly class="dfinput"  style="width:100%"/><input id="autobtn" type="button" value="填充" /></td>
        <td colspan=4>母亲姓名</td>
        <td colspan=4><input type="text" name="otherViewModel.motherId" id="motherId" readonly class="dfinput"  style="width:100%"/></td>
        <td colspan=4>爱人姓名</td>
        <td colspan=4><input type="text" name="otherViewModel.loverId"  id="loverId" readonly class="dfinput"  style="width:100%"/></td>
        </tr>
                
        <tr>
        <td colspan=4>居住地点</td>
        <td colspan=12><input type="text" name="peopleViewModel.building_id" id="building_id"  id="datepicker" readonly class="dfinput"  style="width:100%"/></td>
        <td colspan=4>曾用姓名</td>
        <td colspan=4><input type="text" name="peopleViewModel.other_name" value="${peopleViewModel.other_name}" class="dfinput"  style="width:100%"/></td>
        
        </tr>
        
        <tr>
        <td width="11%" colspan=3>是否失业</td>
        <td colspan=3>
        <div class="vocation" style="height:32px; ">
        <select name="otherViewModel.is_unemployed" class="select3">
    <option value="1">否</option>
    <option value="2">是</option>
    </select>
</div>
</td>
        <td width="11%" colspan=3>是否残疾</td>
        <td colspan=3>
        <div class="vocation" style="height:32px; ">
        <select name="otherViewModel.is_deformity" class="select3">
    <option value="1">否</option>
    <option value="2">是</option>
    </select>
</div>
</td>
<td width="11%" colspan=3>是否外来</td>
        <td colspan=3>
        <div class="vocation" style="height:32px; ">
        <select name="otherViewModel.is_outside" class="select3">
    <option value="1">否</option>
    <option value="2">是</option>
    </select>
</div>
</td>

        <td width="11%" colspan=3>是否退休</td>
        <td colspan=3>
        <div class="vocation" style="height:32px; ">
        <select name="otherViewModel.is_retire" class="select3">
    <option value="1">否</option>
    <option value="2">是</option>
    </select>
</div>
</td>
</tr>
    </table>
  
    
    </div>  
    
    <ul class="forminfo">
    <li><input  type="button" class="btn" value="修改" onclick="upd()"/></li>
    </ul>
       
</div> 
 
<script type="text/javascript"> 
      $("#usual1 ul").idTabs(); 
    </script>
    
    <script type="text/javascript">
$('.tablelist tbody tr:odd').addClass('odd');
</script>
    </div>
    </form>
    </td>
    <td width="16"><img src="<%=request.getContextPath()%>/images/list.gif" name="ImgArrow" width="16" border="0" id="ImgArrow" onclick="showSearch()">
    </td>
    <td width="400" id="searchOne">
    <iframe id="right_iframe" height="300" frameborder=0 width="100%"  src="<%=request.getContextPath()%>/common/search.jsp"></iframe>
    </td>
    </tr>
    </table>
    <script>
    function showSearch()
    {
     if($("#searchOne").css('display') == 'none')
     {
     showWidth(1200);
     $("#searchOne").show();
     } 

[code=java]

[/code]
     else
     {
         $("#searchOne").hide();
         showWidth(800);
     }
    }
    $('#searchOne').hide();
    </script>

#2

这是右面的jsp相关源码，
<script type="text/javascript">
$(document).ready(function(e) 
{
$(".select3").uedSelect({
width :70
});
});
function peopleSearch()
{
if(($('#pid').val()==null||$('#pid').val()=="")&&($('#pname').val()==null||$('#pname').val()==""))
{
alert("姓名/证件号码不可同时为空!");
return ;
}
var $form  = $('#form1');
   $form.attr("action","<%=request.getContextPath()%>/peopleSearch.action");
   $("#tbody1").empty();
   $.ajax({
              type:'POST',
              url:$form.attr("action"),
              data:$form.serializeArray(),
  dataType:"json",
  cache: false,
  success: function(json)
  {
var objArray = json.data; 
var data = eval(objArray);  
if(data!=null)
{
for(var i=0;i<data.length;i++)
{
var tmp='<tr>';
tmp +='<td><input type="radio"/></td>';
tmp +='<td>'+data[i].name+'</td>';
tmp +='<td>'+data[i].card_type+'</td>';
tmp +='<td>'+data[i].id_card+'</td>';
    tmp +='<td>'+data[i].sex+'</td>';
  tmp +='</tr>'
         $('#tbody1').append(tmp);
}     
}
  },
  error:function()
  {
 alert("服务器连接失败");
  }
          });
}
</script>
<style>
body{min-width:400px;}
.select tr{border:solid 1px #cbcbcb;}
.select table{border:solid 1px #cbcbcb; width:100%; clear:both;}
.selecttd{line-height:35px;  border-right: dotted 1px #c7c7c7; text-align:center;}
</style>
</head>

<body>
    <div class="formbody">
    <div id="usual1" class="usual"> 
    
    <div class="itab">
   <ul> 
    <li><a href="#tab1" class="selected">人员查询</a></li> 
    <li><a href="#tab2">自定义</a></li> 
   </ul>
    </div> 

   <div id="tab1" class="tabson">
       <form id="form1" action="#">
      <table class="select">
       <tr class="selecttd">
        <td class="selecttd" width="15%" >证件类型</td>
        <td class="selecttd" > 
        <div class="vocation" style=" height:32px;">
        <select name="searchp.card_type" class="select3">
    <option value="0">全部</option>
    <option value="1">其他</option>
    </select>
</div>
    </td>
    <td class="selecttd" width="25%">证件号码</td>
        <td class="selecttd" width="40%" ><input name="searchp.id_card" id="pid" type="text" class="scinput" />
    </td>
        </tr>
        <tr class="selecttd">
        <td class="selecttd">姓名</td>
        <td class="selecttd"><input name="searchp.name" id="pname" type="text" class="dfinput" style="width:100%"/></td>
        <td  colspan=2 align=right><input type="button" class="scbtn" id="quick" value="查询" onclick="peopleSearch()" /></td>
        </tr>
</table>
</form>
   <table class="tablelist">
     <thead>
     <tr>
        <th>选取</th>
        <th>姓名</th>
        <th>证件类型</th>
        <th>证件号码</th>
        <th>性别</th>
        </tr>
        </thead>
        <tbody id="tbody1">
</tbody>
    </table>
    </div> 
   <div id="tab2" class="tabson">
    </div>      
</div> 
<script type="text/javascript"> 
      $("#usual1 ul").idTabs(); 
    </script>
    <script type="text/javascript">
$('.tablelist tbody tr:odd').addClass('odd');
</script>
    </div>
</body>
</html>

#3

大神在哪里啊？ 上面有段注销的代码是我尝试的不好使。求帮解决

#4

我觉得应该是ajax做出来的。

#5

ajax提交是分同步和异步两种情况的，只有在同步的情况下，ajax返回的结果才能立马被之后的javascript调用

#6

这个简单，可惜我JSP还不会啊。

#7

引用 5 楼 wangyinbin 的回复:

ajax提交是分同步和异步两种情况的，只有在同步的情况下，ajax返回的结果才能立马被之后的javascript调用

我觉得JS 和jquery完全能实现，只不过我的方法可能不对，求教

#8

引用 6 楼 u011461314 的回复:

这个简单，可惜我JSP还不会啊。

 你的大致思路是什么样的的？

#9

$.ajax({
              type:'POST',
              url:$form.attr("action"),
              data:$form.serializeArray(),
  dataType:"json",
  cache: false,
  success: function(json)
{
     $("#你需要赋值的ID").val()=""'
}
}