Home >Web Front-end >H5 Tutorial >Implementation of front-end page jump and value acquisition
This time I will bring you the implementation of front-end page jump and value acquisition. What are the precautions for the implementation of front-end page jump and value acquisition? Here is a practical case, let’s take a look.
Record it
(Jump from page A to page B, and get the value from page B and assign it to page A for display)
Let’s give a chestnut first ;)
This is page A
This is page B
By clicking on page A The added log on page jumps to page B, and the log content added on page B is transferred to the red box position on page A
First referencejs, I have a reference to openpage here. js's own plug-in
//这个是放在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>
Configure the header in public js
(detailed App header Configuration instructions ----------App configuration page header)
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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to use phonegap to find contacts
Detailed explanation of phonegap operation database
Detailed explanation of how phonegap obtains device information
The above is the detailed content of Implementation of front-end page jump and value acquisition. For more information, please follow other related articles on the PHP Chinese website!