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 26 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
vue axios整合使用全攻略
May 24 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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获得文件扩展名三法
2006/11/25 PHP
PHP防止跨域提交表单
2013/11/01 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
keras打印loss对权重的导数方式
2020/06/10 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
什么是TCP/IP
2014/07/27 面试题
汽车运用工程毕业生自荐信
2013/10/29 职场文书
12月红领巾广播稿
2014/02/13 职场文书
工程质量承诺书
2014/03/27 职场文书
微电影大赛策划方案
2014/06/05 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python