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 相关文章推荐
JavaScript原型继承之基础机制分析
Aug 26 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 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
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
快速入门Vue
2016/12/19 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
总结Python编程中函数的使用要点
2016/03/20 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
如何基于python实现不邻接植花
2020/05/01 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
天游软件面试
2013/11/23 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
LINUX下线程,GDI类的解释
2016/12/14 面试题
搞笑获奖感言
2014/01/30 职场文书
公司开业庆典主持词
2014/03/21 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
租房协议书怎么写
2014/04/10 职场文书
保安2014年终工作总结
2014/12/06 职场文书
小学六年级毕业感言
2015/07/30 职场文书
mysql 获取时间方式
2022/03/20 MySQL