ajax如何实现页面局部跳转与结果返回


Posted in Javascript onAugust 24, 2015

通过代码示例分析给大家介绍ajax实现页面局部跳转与结果返回,具体内容如下:

1、带有结果返回的提交过程

这里用一个提交按钮来演示,HTML代码为:

<input type="button" class="btn" value="提报" name="submit4" onClick="tibao();">

点击提报按钮后,通过ajax来实现跳转到action中处理,JavaScript代码为:

function tibao(){
var id='';
var URL = <select:link page="/smokeplan.do?method=Tibao&idset="/>+id;
  $.ajax({url: URL, 
    type: 'GET',
    
success: function(result) {
           alert(result);
        }
  });
}

action处理完成后,将返回的结果放到result中,在页面弹出提示信息;当然这里的action跳转是需要配置xml的。

后台Java类处理过程为:

//提报
    public void Tibao(ActionMapping mapping, ActionForm form,
        HttpServletRequest request, HttpServletResponse response) throws Exception {
      String idset=request.getParameter("idset");
      CallHelper helper = initializeCallHelper("L_SmokeBoxtibaoWLDan", form,request, false);
      helper.setParam("bill_ids",idset);
      helper.setParam("personid",getPersonId(request));
      helper.execute();
      PrintWriter write = response.getWriter();
      write.print(helper.getOutput("message"));
      write.close();
    }

这里是通过一个sql语句对数据进行处理,返回一个message,并将信息打印到页面;

这里做的操作的结果是反映到response对应的位置,于是拿到属于response的流,而不是new一个出来。

也就是说我从那里跳转过来的,我这个信息就会返回到那里去。所以在js中就可以用result进行接收这个返回结果,并且用alert提示。

使用AJAX如何实现页面跳转

示例代码如下:

项目当中采用了ajaxAnywhere框架来实现ajax,效果不错,并且容易实现,但现在问题是即使页面实现了效果,业务上还需要提交表单,在这种情况下,即使点击提交后,它仍然会刷新你定义好的zone区域,这个时候,如果单纯的提交表单就不够了,我采取的方案是:

 利用js这个强大的BS项目开发工具,自定义一个函数来解决上述问题:

function doGuahao()
{
 if(checkdata())
 {
 if(document.form1.result_flag.value=="0")
 {
  return false;
 }
 else
 {
  if(document.form1.checktype.value=="danganhao")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
  if(document.form1.checktype.value=="xingming")
  {
  form1.action = parent.left.url2;
  form1.submit();
  }
  if(document.form1.checktype.value=="shenfenzheng")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
 }
 } 
}

以上内容就是本文介绍ajax如何实现页面局部跳转与结果返回的全部内容,希望大家喜欢。

Javascript 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 #Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 #Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 #Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 #Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 #Javascript
jquery性能优化高级技巧
Aug 24 #Javascript
javascript实现支持移动设备画廊
Aug 24 #Javascript
You might like
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python比较2个时间大小的实现方法
2018/04/10 Python
Python贪心算法实例小结
2018/04/22 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python接口测试get请求过程详解
2020/02/28 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
python3.7添加dlib模块的方法
2020/07/01 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
自我鉴定怎么写
2014/01/12 职场文书
绿色小区申报材料
2014/08/22 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
雷锋观后感
2015/06/10 职场文书
小马王观后感
2015/06/11 职场文书
环境卫生整治简报
2015/07/20 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技