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修改客户端注册表的方法
Aug 09 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
node.js中express-session配置项详解
May 31 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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 数组教程 定义数组
2009/10/23 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php组合排序简单实现方法
2016/10/15 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
JS的反射问题
2010/04/07 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
python实现统计代码行数的方法
2015/05/22 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python中树与树的表示知识点总结
2019/09/14 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
C#可否对内存进行直接的操作
2015/02/26 面试题
应届生求职推荐信
2013/10/28 职场文书
养殖项目策划书范文
2014/01/13 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server