ajax应用————点击后局部刷新

我正好在学习struts内容,所以以struts为例

1.首先在你的web项目里面导入如下文件

commons-beanutils-1.7.0.jar
 commons-collections-3.1.jar
 commons-lang-2.5.jar
 commons-logging-1.1.1.jar
 ezmorph-1.0.3.jar
 json-lib-2.1-jdk15.jar

2.写一个login.jsp示例,这里我只写 body体内容

<body>
  <script type="text/javascript">
    $(function(){
     
      $("#s1").click(function(){
                  /*getJSON后面的三个参数分别 是 url,{key:value,key1:value1},callback回调函数,json是后台通过通过response得到的Printwriter写过来的*/
              $.getJSON("<%=basePath%>/authority/test",{name:1}, function(json){
                         $("#s1").empty();
                         for(var v in json){
                              $("#s1").append("<option>"+json[v]+"<option>");
                         }
                     
                    });
      
      
              });
              <!--click结束-->
      
      
      })
  </script>
  <!--
              这里举了各种json数据的处理可以供参考;
            $(function(){
                var json = {"name":"jack","gender":"male","height":174.00,"birthday":new Date()};//定义一个JSON对象
                $("#b100").click(function(){
                    alert(json.birthday);
                });
                
                $("#b101").click(function(){
                    for(var key in json){
                        alert(json[key]);
                    }
                });
                
                
                var jsonarray = [{"节目名":"非诚勿扰","主播":"孟非","收视率":0.2},
                         {"节目名":"极限挑战","主播":"柳言","收视率":0.1},
                         {"节目名":"NBA","主播":"周建龙","收视率":0.3},
                         {"节目名":"妈妈米亚","主播":"妈妈","收视率":0.9},
                         {"节目名":"花样姐姐","主播":"林志灵","收视率":0.1},
                         {"节目名":"天天向上","主播":"汪涵","收视率":0.15}
                         ];
                
                $("#b102").click(function(){
                    /*
                    for(var index=0;index<jsonarray.length;index++)
                        alert( jsonarray[index]["节目名"]);
                        */
                    for(var index in jsonarray){
                        var v="";
                        for(var key in jsonarray[index]){
                            v=key+"="+jsonarray[index][key]+"\t"+v;
                        }
                        alert(v);
                    }    
                });
                
                $("#b103").click(function(){
                    var jsonstr =‘({"name":"rose","address":"江苏无锡"})‘;
                    var jsons = eval(jsonstr);
                    alert(jsons["name"]);
                });
            })
         -->
      <select id="s1">
      </select>
 </body>

3.struts自己配置(如果你是servlet。web.xml也自己配置),连接的一个action,代码如下:

public class TestJson extends ActionSupport {

/* (non-Javadoc)
     * @see com.opensymphony.xwork2.ActionSupport#execute()
     */
    @Override
    public String execute() throws Exception {
        
        //如果你的类是servlet,response可以直接用
        HttpServletResponse response=ServletActionContext.getResponse();
        response.setContentType("text/html;charset=utf-8");

//2.数据以map为例
        Map<String,String> map = new HashMap<String, String>();
        map.put("100", "洗衣机");
        map.put("101", "洗衣粉");
        map.put("102", "电冰箱");
        map.put("103", "空调");
        map.put("104", "彩电");
        map.put("105", "烤箱");
        
        //3.将数据转化位json,在转化为字符串jsonstr;
        String jsonstr = JSONObject.fromObject(map).toString();
        
        //4.数据写出去
        PrintWriter out = response.getWriter();
        out.write(jsonstr);
        out.flush();
        out.close();
        return super.execute();
        
    }
    
}

时间: 2024-10-12 21:02:48

ajax应用————点击后局部刷新的相关文章

JQuery的Ajax请求实现局部刷新的简单实例

我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改变图标. 1.页面 给每条记录的图标一个唯一的id值: 代码如下: <td align="center">    <s:if test="messageState == 0"><img src

ASP.NET使用ajax实现分页局部刷新页面

listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) <asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled"> <

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说的ajax配合div局部刷新页面,其实很简单,下面我们就看一下这种刷新方式是如何实现的. jsp页面ajax代码如下: $("#waitWork").click(function(){ var url = "请求地址"; var data = {typ

ajax跳转到新的jsp页面(局部刷新)

ajax可以实现局部刷新页面,即在不刷新整个页面的情况下更新页面的局部信息. 项目中遇到一个问题:在用户列表也,当点击某个按钮时需要去查询用户的信息,查询成功跳转到用户详情界面:查询失败,则在原页面弹出提示信息. 想到两个解决办法: 方法一: 点击按钮,调用普通方法去查询用户信息,查询成功跳转到用户详情页面:查询失败,重定向调用查询用户列表的方法,在查询用户列表的方法结束后重新跳转到用户列表页面并弹出提示信息,相当于重新加载了用户列表页面. 方法二: 根据需求,不可以重新加载用户列表页面.用aj

ext.js 两种局部刷新的方式

$.ajax({ type: "POST", url: "AjaxAlgorithmOptimzeHandler.ashx?cmd=yhtrafficFlow", data: 'encoded=' + encoded, dataType: 'json', success: function (msg) {//msg其实就是Car类的一个实例 等价 car1 alert(msg); } }); 1 listeners: { 2 click: function (a,

ASP.NET MVC 4实现局部刷新

 废话不多说,直接讲我的思路: 利用Ajax+PartialView时间局部刷新. 首先在页面上引用了一个PartialView,当用Ajax更新数据时需要同时更新整个PartialView内容. Ajax代码: $.ajax({ url: "url", type: "Post", data: { "sectionid": sectionId, "questions": ids.join(",") },

jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了很多内容,然后继续输入一个"e"后,提示的范围明显就变小了. 注:在文末我会给出完整源代码的下载链接,以供大家参考 二 具体实现 1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar.也就是说,

Ajax局部刷新(使用JS操作)

对于在不使用Ajax的情况下,使用JS来进行局部刷新,主要有如下的几步: 1. 得到XMLHttpRequest 2. 使用open方法打开连接 3. 设置请求头信息 4. 注册onreadystatechange事件,并判断是否请求响应成功(使用readyState和status) 5. 在请求和响应成功之后,取得服务器响应的数据,使用responseText 对于直接使用js来自己编写,这样工作复杂,步骤多,我们可以将其进行封装好.同时还有一种更好的方式,就是使用jquery中的ajax方法

基于H5 pushState和Ajax完美实现页面局部刷新

众所周知使用Ajax可以局部刷新提高用户体验,然而url不跟随改变是其一大弊端. 如果修改浏览器地址栏的url,同时不刷新整个页面就完美了. 先来看看什么是pushState? 给history对象增加一个状态. window.history.pushState(stateData, 'title', 'newUrl'); // stateData用于事件参数 window.addEventListener('popstate', function(){ var state = window.h