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实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
详解iframe与frame的区别
Jan 13 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
微信小程序自动客服功能
Nov 02 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
Vue父子传递实例讲解
Feb 14 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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
用在PHP里的JS打印函数
2006/10/09 PHP
PHP使用者状态管理功能的应用
2006/10/09 PHP
php curl的深入解析
2013/06/02 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python复制文件操作实例详解
2015/11/10 Python
django 常用orm操作详解
2017/09/13 Python
python之pandas用法大全
2018/03/13 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python 画出来六维图
2019/07/26 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
django教程如何自学
2020/07/31 Python
致跳远、跳高运动员广播稿
2014/01/09 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
Python matplotlib绘制雷达图
2022/04/13 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android