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 相关文章推荐
node.js中的console.log方法使用说明
Dec 09 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
js Dom实现换肤效果
Oct 21 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
JS实现页面炫酷的时钟特效示例
Aug 14 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php使用GeoIP库实例
2014/06/27 PHP
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python标准库之collections包的使用教程
2017/04/27 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
自荐信格式的六要素
2013/09/21 职场文书
违反学校规定检讨书
2014/01/18 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
葬礼司仪主持词
2014/03/31 职场文书
学生请假条格式
2014/04/11 职场文书
询价采购方案
2014/06/09 职场文书
会议新闻稿
2015/07/17 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书