关于jsp radiobutton 点击时刷新页面，重置检索结果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于jsp radiobutton 点击时刷新页面，重置检索结果相关的知识，希望对你有一定的参考价值。

现在画面上有几个radiobutton，现在想要实现的是，当点击第一个radiobutton，点击检索时出现第一次检索结果；当我第二次选择其他的radiobutton时，页面要恢复到一次都没检索前的状态（也就是这个页面刚进来初始化的时候），并且radiobutton的焦点要选择在第二次点击的radiobutton上。

jsp radio button点击时要通过js触发ajax接口进行异步获取检索数据并展示在jsp页面，页面进行局部刷新。
例如，页面上有radio，需要绑定change事件：
radio change事件

$(\'input:radio[name="role"]\').change( function()
当一个元素，或者其内部任何一个元素失去焦点的时候会触发这个事件。这跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
$("#username").focusout(function()
var roles = document.getElementsByName("role");
此处进行ajax调用：

$.ajax(
type: "GET",
url: "test.json",
data: username:$("#username").val(), content:$("#content").val(),
dataType: "json",
success: function(data)
$(\'#resText\').empty(); //清空resText里面的所有内容
var html = \'\';
$.each(data, function(commentIndex, comment)
html += \'<div class="comment"><h6>\' + comment[\'username\']
+ \':</h6><p class="para"\' + comment[\'content\']
+ \'</p></div>\';
);
$(\'#resText\').html(html);

); 参考技术A <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<script type="text/javascript" src="Scripts/jquery-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function()
var $ci=$('.changsha');
$ci.hide();

$('#o1').click(function()
var $ci=$('.changsha');
$ci.show();
);

$('#o2').click(function()
var $ci=$('.changsha');
$ci.hide();
);
);

</script>
<body>
<form action="test2.jsp">
<input type="radio" name="radio" id="o1" value="open" />选择城市<br/>
<div class="changsha">长沙</div>
<input type="radio" name="radio" id="o2" value="close"/>关闭城市
</form>
</body>
</html>
这是我用jQuery做，你是要这种效果吗，这代码不能直接运行，还要在myeclipse里要一个Js文件，就是jQuery了，可以到jQuery官方下载，然后调用就可以运行我的代码了。
<script type="text/javascript" src="Scripts/jquery-1.7.js"></script>
这就是上面调用的语句了，src是路径了，明白了吗，还有什么不懂的。到http://hi.baidu.com/borter/home里留言。

如果你不想用jquery,就可以直接用：
用radio点击显示隐藏，是通过DOM来实现的，没有用jQuery
===============================================================
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

 <title>显示和隐藏</title>

 </head>

 <script type="text/javascript">

 

 function opendiv()

 document.getElementById("city").style.display='block';//显示

 

 

 function closediv()

 document.getElementById("city").style.display='none';//隐藏

 

 

 </script>

 <body>

 <input type="radio" name="rd" id="r1" onClick="opendiv()"/>选择<br/>

 <div id="city" style="display:none;">长沙</div>

 <input type="radio" name="rd" id="r2" onClick="closediv()"/>取消

 </body>

 </html>本回答被提问者采纳 参考技术B radiobutton的click事件 通过 ajax的非刷新实现 每个radiobutton在点击的时候都请求不同的数据 然后显示

ajax跳转到新的jsp页面（局部刷新）

ajax可以实现局部刷新页面，即在不刷新整个页面的情况下更新页面的局部信息。
项目中遇到一个问题：在用户列表也，当点击某个按钮时需要去查询用户的信息，查询成功跳转到用户详情界面；查询失败，则在原页面弹出提示信息。
想到两个解决办法：
方法一：
点击按钮，调用普通方法去查询用户信息，查询成功跳转到用户详情页面；查询失败，重定向调用查询用户列表的方法，在查询用户列表的方法结束后重新跳转到用户列表页面并弹出提示信息，相当于重新加载了用户列表页面。
方法二：
根据需求，不可以重新加载用户列表页面。用ajax调用查询用户详情的方法，查询成功返回用户Json串，查询失败则返回error。
     后台方法：
     
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@RequestMapping(value = "searchUser")
  public void searchHome(HttpServletResponse response){
        String result = null;
        ...
        查询用户的方法
        ...
 
        if(查询成功){
             result = JsonUtil.objectToJson(查询结果对象);//结果对象转化成Json字符串，在ajax的结果中跳转到用户详情的处理方法
             AjaxUtil.ajax(response,result);
        }else{//查询失败，返回提示信息
             AjaxUtil.error(response, "查询用户失败");
        }   
  }
     jsp页面的ajax：
    
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function searchUser(){
          $.ajax({
               url : "testurl/searchUser",
               cache : false,
               type : ‘POST‘,
               data : {
                    查询用的数据，比如用户ID
               },
               success : function(data) {
                    var obj = eval("("+data+")");  
                     
                    if(obj.success==undefined){//查询成功，跳转到详情页面
                         ...
                         跳转到用户详情处理方法，将date数据传过去
                         ...
                    }else if(!obj.success){//查询失败，弹出提示信息
                          weui.Loading.info(obj.message);
                    }
               },
               error : function(error) {
                    weui.alert("查询用户有误！");
               }
          });       
    }　
此处的重点在于如何在ajax的回调函数中调用普通方法，并将之前查询出的用户数据传到普通方法中（上面伪代码中红色的部分），继而跳转到用户详情页面。
（1）错误案例：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function searchUser(){
           $.ajax({
                url : "testurl/searchUser",
                cache : false,
                type : ‘POST‘,
                data : {
                     查询用的数据，比如用户ID
                },
                success : function(data) {
                     var obj = eval("("+data+")");
                     if(obj.success==undefined){//查询成功，跳转到详情页面，encodeURIComponent编码是为了防止url后面传送的参数中文乱码,在后台处理时需要解码
                          window.location.href = "testurl/userForm?userJson="+encodeURIComponent(data);
                     }else if(!obj.success){//查询失败，弹出提示信息
                           weui.Loading.info(obj.message);
                     }
                },
                error : function(error) {
                     weui.alert("查询用户有误！");
                }
           });       
     }

　　

错误原因：window.location.href方法为get方法，这会使得参数显示的浏览器的url中，不安全，并且数据传送的长度有限制。
 
（2）想到的笨方法：在body中写隐藏的form表单，在回调函数中把查到的用户数据复制给form表单中的input，然后提交表单跳转到普通方法中，这样就是以post方法提交的数据，并且可以跳转到新页面了：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function searchUser(){
           $.ajax({
                url : "testurl/searchUser",
                cache : false,
                type : ‘POST‘,
                data : {
                     查询用的数据，比如用户ID
                },
                success : function(data) {
                     var obj = eval("("+data+")");
                     if(obj.success==undefined){//查询成功，跳转到详情页面
                          $("#userFormJson").val(data);
                          $("#userForm").attr("action","testurl/userForm");
                          $("#userForm").submit();
                     }else if(!obj.success){//查询失败，弹出提示信息
                           weui.Loading.info(obj.message);
                     }
                },
                error : function(error) {
                     weui.alert("查询用户有误！");
                }
           });       
     }　
jsp页面的body
?
1
2
3
4
5
<body>
    <form id="userForm" action="" method="post">
        <input id="userFormJson" name="userFormJson" type="hidden"/>
    </form>
</body>

　　

以上是关于关于jsp radiobutton 点击时刷新页面，重置检索结果的主要内容，如果未能解决你的问题，请参考以下文章

请问ASP.NET中当点击某个控件时（如Button）不想进行整个页面的刷新怎样设置？

html fream 刷新时页面跳转怎么控制

ajax跳转到新的jsp页面（局部刷新）

当jsp页面加载后会自动点击按钮，页面会一直刷新要怎么解决。或有其他方法实现自动点击按钮也可以。

jsp页面该如何刷新验证码

jsp中如何实现点击一个提交按钮，把其中数据提交到数据库同时刷新该页面