ajax如何做出页面局部跳转功能

这次给大家带来ajax如何做出页面局部跳转功能,ajax做出页面局部跳转功能的注意事项有哪些,下面就是实战案例,一起来看一下。

通过代码示例分析给大家介绍ajax实现页面局部跳转与结果返回,具体内容如下:

1、带有结果返回的提交过程

这里用一个提交按钮来演示,HTML代码为:


登录后复制

点击提报按钮后,通过ajax来实现跳转到action中处理,JavaScript代码为:

function tibao(){var id='';var URL = +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 = "";  form1.submit();  }  if(document.form1.checktype.value=="xingming")  {  form1.action = parent.left.url2;  form1.submit();  }  if(document.form1.checktype.value=="shenfenzheng")  {  form1.action = "";  form1.submit();  } } } }

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Ajax实现Loading效果

JS实现ajax调用后台定义(附代码)

以上就是ajax如何做出页面局部跳转功能的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2767940.html

(0)
上一篇 2025年3月8日 11:53:35
下一篇 2025年2月18日 05:32:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • ajax实现三级联动(附代码)

    这次给大家带来ajax实现三级联动(附代码),ajax实现三级联动的注意事项有哪些,下面就是实战案例,一起来看一下。 1.首先在一个页面上布置一个p 方便日后引用方法 //p的id为“sanji” 登录后复制 2.sanji js处理页面 …

    编程技术 2025年3月8日
    200
  • 怎样局部更新Razor页面

    这次给大家带来怎样局部更新Razor页面,局部更新Razor页面的注意事项有哪些,下面就是实战案例,一起来看一下。 本文就做一个简单例子,实现Razor配合ajax做到局部刷新。 首先,我们创建一个MVC项目 让我们创建一个简单的Contr…

    2025年3月8日 编程技术
    200
  • ajax请求操作返回数据顺序

    这次给大家带来ajax请求操作返回数据顺序,ajax请求操作返回数据顺序的注意事项有哪些,下面就是实战案例,一起来看一下。 ajax请求一个url,php后端处理后,数组为如下格式: $a = array( ‘-1’=> 10 ,’-…

    编程技术 2025年3月8日
    200
  • JS基于ajax操作信息的使用

    这次给大家带来JS基于ajax操作信息的使用,JS基于ajax操作信息的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例讲述了JavaScript基于ajax编辑信息的方法。分享给大家供大家参考。具体如下: // Requires…

    编程技术 2025年3月8日
    200
  • 不使用插件让Ajax实现异步刷新

    这次给大家带来不使用插件让Ajax实现异步刷新,不使用插件让Ajax实现异步刷新的注意事项有哪些,下面就是实战案例,一起来看一下。 所谓的异步刷新,就是不刷新整个网页进行更新数据。 只有通过js才能实现Ajax,进而实行异步刷新 表单提交数…

    2025年3月8日
    200
  • 在jQuery里调用ajax实现异步

    这次给大家带来在jQuery里调用ajax实现异步,在jQuery里调用ajax实现异步的注意事项有哪些,下面就是实战案例,一起来看一下。 $(document).ready(function(){ //Jquery 页面加载事件,当页面加…

    编程技术 2025年3月8日
    200
  • Jsonp怎样才能解决ajax跨域

    这次给大家带来Jsonp怎样才能解决ajax跨域,Jsonp解决ajax跨域的注意事项有哪些,下面就是实战案例,一起来看一下。 一、介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,…

    2025年3月8日 编程技术
    200
  • jsonp+json实现AJAX跨域请求

    这次给大家带来jsonp+json实现AJAX跨域请求,jsonp+json实现AJAX跨域请求的注意事项有哪些,下面就是实战案例,一起来看一下。 AJAX(异步的 JavaScript 和 XML)是用于创建快速动态网页的一种技术,它在不…

    2025年3月8日
    200
  • 前端与后端ajax交互方法总结(附代码)

    这次给大家带来前端与后端ajax交互方法总结(附代码),前端与后端ajax交互的注意事项有哪些,下面就是实战案例,一起来看一下。 前端ajax与后端Spring MVC控制器有以下五种数据交互方式。(前台使用了dhtmlxGrid,后端使用…

    编程技术 2025年3月8日
    200
  • 怎么使用Mobile控制页面返回时get请求

    这次给大家带来怎么使用Mobile控制页面返回时get请求,使用Mobile控制页面返回时get请求的注意事项有哪些,下面就是实战案例,一起来看一下。 问题描述 假设在项目中,有三个页面,分别是main.html、test1.html、te…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论