• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 前端页面跳转并取值的实现

前端页面跳转并取值的实现

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含实现,取值,页面等相关知识,匿名希望在学习及工作中可以帮助到您
这次给大家带来前端页面跳转并取值的实现,前端页面跳转并取值的实现的注意事项有哪些,下面就是实战案例,一起来看一下。

记录一下

(从A页面跳转到B页面,并将B页面的值取到赋到A页面上显示)

先来举一个栗子;)

这个是A页面

这是B页面

通过点击A页面上的添加日志 跳转到B页面,并将在B页面上添加的日志内容传到A页面上 红色框位置

首先引用js,我这里有引用openpage.js 自己的一个插件

//这个是放在A页面上的 
//将填写的日志 返回的json数据  填充到客户详情
        function DunnAge(data) { //成功之后从B页面返回的数据data
            var data = JSON.parse(JSON.stringify(data));
            var Remark = data.Body.Remark;//内容
            var AddTimeStr = data.Body.AddTimeStr;
            var html = '<p class="accessLog"><p class="val-log">' + Remark + '</p><p class="time-log">' + AddTimeStr + '</p></p>';
            $(".js_noJilu").hide();
            $(".js_rizhi").prepend(html)
        }
 <p class="detailss-btn js_openPage" data-url="/OACustomer/AddLogView?Id=@detail.Id">添加日志</p>

公共js里面配置头部

(详细的App头部配置说明----------App配置页面头部)

A页面的头部  "/OACustomer/CustomerDetail": { title: "客户详情", headLeft: [{ foreImage: "iconback", eventString: "gjj://Close.Page/1?jsCallBack=JC5wYWdpbmcuc2VhcmNoKCk7"}],
 headRight: [{ foreImage: "icondrop", type: "DropDownList", menus: [{ iconImage: "iconcontentchange", alpha: "100", text: "修改客户信息", textSize: 16, textColor: "000000", backColor: "FFFFFF", eventString: "modiFicaTion()" }, ], }] },
B页面的头部  "/OACustomer/AddLogView": { title: "添加客户日志", headRight: [{ text: "提交", eventString: "submit()" }] }//js里配置的头部
  //这是放在B页面上的
  //提交
        function submit() {
            var mes = $("form").validtor();
            if (mes) {
                $.dialog.openDialogString(mes);
                return false;
            }
            var url = "/OACustomer/SubmitAddLog";
            $.ajax({
                type: "post",
                url: url,
                data: $("form").serialize(),
                dataType: "json",
                beforeSend: function () {
                },
                error: function () {
                    $.dialog.openDialogString("加载失败,请重试");
                },
                success: function (data) {
                    if (data.DictJsonStatus == 200) {
                        //将填写的日志 返回的json数据  填充到客户详情
                        $.zProtocol({
                            type: "Close.Page",
                            path: "/1",
                            success: 'DunnAge(' + JSON.stringify(data) + ')'
                        });
                    } else {
                        $.dialog.openDialogString(data.Msg);
                    }
                }
            })
        }
//页面内容
<form action="/OACustomer/SubmitAddLog">//后台提交数据的action(SubmitAddLog)
<!------action 提交地址------>
<input type="hidden" value="@detail.Id" name="FkOACustomer"/>
<p class="remarks">
<p><i style="color:#f00">*</i>备注留言:</p>
<p>
<textarea placeholder="请填写申请表述(必填)" class="js_inputbox" name="Remark" data-tipname="备注留言" data-valid='{required:true}'></textarea></p>
</p>
</form>

相信看了本文案例你已经掌握了方法,更多精彩请关注微课江湖其它相关文章!

推荐阅读:

怎样使用phonegap查找联系人

phonegap操作数据库详解

phonegap获取设备信息方法详解

以上就是前端页面跳转并取值的实现的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 【HTML5】3D模型--百行代码实现旋转立体魔方实例
  • HTML5实现动画效果的方式汇总
  • Html5实现二维码扫描并解析
  • html5 css3网站菜单实现代码
  • 基于HTML5 Canvas 实现弹出框效果
  • HTML5中使用postMessage实现Ajax跨域请求的方法
  • HTML5-WebSocket实现聊天室示例
  • HTML5 dialog是什么?怎么使用HTML5中的dialog来实现模拟弹窗?
  • HTML5实现魔方游戏的代码
  • 利用SurfaceView实现下雨与下雪动画的效果

相关文章

  • 2018-12-03总结关于填充与描边注意点
  • 2017-08-06HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
  • 2018-12-03html5的画布canvas——画出弧线、旋转的图形实例代码+效果图_html5教程技巧
  • 2018-12-03让IE支持HTML5的方法_html5教程技巧
  • 2018-12-03利用H5仿微信界面
  • 2018-12-03HTML5标签大全
  • 2018-12-03后端渲染html、前端模板渲染html,jquery的html,各有什么区别?
  • 2018-12-03分享HTML5 Canvas画印章效果实例代码
  • 2018-12-03H5页面音视频自动播放
  • 2018-12-03WEB前端规范命名的介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5学习心得总结(推荐)
    • 24个canvas基础知识小结
    • HTML5开源游戏引擎lufylegend1.6.0发布
    • HTML5实现魔方游戏的代码
    • HTML5 visibilityState属性详细介绍和使用实例
    • HTML5标签大全
    • html5 canvas标签是什么意思?canvas标签使用方法介绍
    • HTML5新特性之用SVG绘制微信logo _html5教程技巧
    • H5的服务器推送事件详解
    • html5 touch事件实现页面上下滑动效果【附代码】_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有