一步操作中，实现页面跳转与加载Ajax数据方案

深藏阁楼爱情的钟 2021-11-26 08:20 278阅读 0赞

**实际业务中遇到这样一个问题：**

1）在一个页面中操作数据，点击菜单中某个模块，跳转到另外一个页面(逻辑设计如此)

2）跳转后，需要加载另外一个模块中的数据

3）跳转后需要携带模块的id，便于定位展示数据

**       实现思路：**

由于Ajax必须在当前页面才能加载数据；所以不可能在同一个方法中，跳转新页面后再加载Ajax；设计如下

1）先跳转新页面，在新页面中添加Ajax更新方法

2）跳转携带任务id到浏览器URL

3）从浏览器URL中获取id，展示列表数据

** 步骤如下：**

1）点击跳转新页面按钮

οnclick="showHttpTask('+ id+ ')"

2）跳转按钮调用方法，实现另外一个页面跳转：

function showHttpTask(id)\{  
    window.location.href="/task/taskToCase?taskId="+id;\}

3）在另外一个页面，初始化过程中，调用加载Ajax的方法：

if(showTaskId!=null)\{  
                        showCase(data.taskId);//初始化页面中，调用Ajax数据更新  
                    \}

/\*  实现Ajax方法  \*/

function showCase(id)\{  
    /\*第一个Ajax请求，显示任务对应的用例\*/  
     $.ajax(\{  
            url : '/task/searchMaidianCase',  
            dataType:'json',  
            type : 'get',  
            data : \{  
                id : id,  
            \},  
            success : function(result) \{  
                   //console.log("ccccccccc",result);  
                   var res=result.maidian;  
                   len = res.length;  
                   var result;\}

//后面处理省略

）

**以下后台代码，作为上面跳转响应(仅供参考)：**

1）/\* 跳转新页面 \*/

@RequestMapping(value="/taskToCase")  
                public String taskToCase(@RequestParam("taskId") int taskId) \{  
                    return "maidian/maidian";  
                \}

2）Ajax跳转调用接口

@ResponseBody  
                @RequestMapping(value="searchMaidianCase",method=RequestMethod.GET)  
                         public  Object searchMaidianCase(@RequestParam("id") int id,Model model) \{  
                    try \{  
                        List<PointEntity> PointEntities=new ArrayList<PointEntity>();  
                        PointEntities=Task.selectMaidianById(id);  
                        model.addAttribute("maidian",PointEntities);   
                        //System.err.println("testing"+JSON.toJSON(model));          
                    \} catch (Exception e) \{  
                        e.printStackTrace();  
                    \}         
                       return JSON.toJSON(model);  
                        \}