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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
JavaScript知识点整理
Dec 09 Javascript
javascript实现列表切换效果
May 02 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 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模板类代码
2008/09/07 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Python标准异常和异常处理详解
2015/02/02 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
使用Python实现画一个中国地图
2019/11/23 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
一道SQL面试题
2012/12/31 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
护士岗位职责
2014/02/16 职场文书
公司接待方案
2014/03/08 职场文书
大学生村官演讲稿
2014/04/25 职场文书
国际贸易专业求职信
2014/06/04 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
企业宣传稿范文
2015/07/23 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python