当前位置:Gxlcms > html代码 > 前端页面跳转并取值的实现

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

时间:2021-07-01 10:21:17 帮助过:42人阅读

这次给大家带来前端页面跳转并取值的实现,前端页面跳转并取值的实现的注意事项有哪些,下面就是实战案例,一起来看一下。

记录一下

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

先来举一个栗子;)

这个是A页面

这是B页面

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

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

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

公共js里面配置头部

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

  1. A页面的头部 "/OACustomer/CustomerDetail": { title: "客户详情", headLeft: [{ foreImage: "iconback", eventString: "gjj://Close.Page/1?jsCallBack=JC5wYWdpbmcuc2VhcmNoKCk7"}],
  2. headRight: [{ foreImage: "icondrop", type: "DropDownList", menus: [{ iconImage: "iconcontentchange", alpha: "100", text: "修改客户信息", textSize: 16, textColor: "000000", backColor: "FFFFFF", eventString: "modiFicaTion()" }, ], }] },
  3. B页面的头部 "/OACustomer/AddLogView": { title: "添加客户日志", headRight: [{ text: "提交", eventString: "submit()" }] }//js里配置的头部
  4. //这是放在B页面上的
  5. //提交
  6. function submit() {
  7. var mes = $("form").validtor();
  8. if (mes) {
  9. $.dialog.openDialogString(mes);
  10. return false;
  11. }
  12. var url = "/OACustomer/SubmitAddLog";
  13. $.ajax({
  14. type: "post",
  15. url: url,
  16. data: $("form").serialize(),
  17. dataType: "json",
  18. beforeSend: function () {
  19. },
  20. error: function () {
  21. $.dialog.openDialogString("加载失败,请重试");
  22. },
  23. success: function (data) {
  24. if (data.DictJsonStatus == 200) {
  25. //将填写的日志 返回的json数据 填充到客户详情
  26. $.zProtocol({
  27. type: "Close.Page",
  28. path: "/1",
  29. success: 'DunnAge(' + JSON.stringify(data) + ')'
  30. });
  31. } else {
  32. $.dialog.openDialogString(data.Msg);
  33. }
  34. }
  35. })
  36. }
  37. //页面内容
  38. <form action="/OACustomer/SubmitAddLog">//后台提交数据的action(SubmitAddLog)
  39. <!------action 提交地址------>
  40. <input type="hidden" value="@detail.Id" name="FkOACustomer"/>
  41. <p class="remarks">
  42. <p><i style="color:#f00">*</i>备注留言:</p>
  43. <p>
  44. <textarea placeholder="请填写申请表述(必填)" class="js_inputbox" name="Remark" data-tipname="备注留言" data-valid='{required:true}'></textarea></p>
  45. </p>
  46. </form>

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

推荐阅读:

怎样使用phonegap查找联系人

phonegap操作数据库详解

phonegap获取设备信息方法详解

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

人气教程排行