• 页面跳转,form方式提交参数或数据


    场景案例:页面跳转加载页面。本页面隐藏了跳转后页面所要展示的数据(参数),但此时不能使用get提交方式,将数据(参数)暴露在状态栏。

    解决方案:通过js,模拟表单from,post方式提交,将参数传递跳转页面的后台

    效果图:

     点击其中的图片跳转业绩详情页

     此时跳转后的页面所展示的数据,是通过列表页表单的post方式提交,因此可以完全不通过get方式在状态栏上暴露参数进行传递。

    代码:

    html:

    <ul class="bus_list">

      <li onclick="goCpi(this)" data-url="https://test-resource-ng.ouyeel.com/statics/S3WL?path=public_oyzg/c93c2e9e22feae07792cf281001a95e4.png&amp;fileName=c93c2e9e22feae07792cf281001a95e4.png" data-content="123456">

        <img src="https://test-resource-ng.ouyeel.com/statics/S3WL?path=public_oyzg/c93c2e9e22feae07792cf281001a95e4.png&amp;fileName=c93c2e9e22feae07792cf281001a95e4.png">

      <div class="bus_title">

        <p>66</p>

      </div>

      </li>

    </ul>

    js:

    function goCpi(obj) {
    var imgSrc=$(obj).attr("data-url"); //获取图片参数
    var con=$(obj).attr("data-content");//获取内容参数
    var type=$("#type").val();//状态栏展示type参数(该参数不重要,因此不用隐藏)
    var num=$("#num").val();//状态栏num参数
    var company=$("#company").val();//状态栏company参数

    var tempForm = document.createElement("form"); //创建form表单
    tempForm.id = "tempForm1";//设置表单属性id=“tempForm1”
    tempForm.method = "post";//设置method提交方式为Post
    tempForm.action =jump_url + '/business/cpi?type='+type+"&num="+num+"&company="+company; //页面跳转url(url上的参数是通过get提交)
    tempForm.target = name; // _blank - URL加载到一个新的窗口

    var hideInput = document.createElement("input"); //创建input隐藏域
    hideInput.type = "hidden";//type类型为hidden ,隐藏参数
    hideInput.name = "imgSrc"; // 设置隐藏域的name属性为imgSrc (name="imgSrc")
    hideInput.value = imgSrc; //设置隐藏域的value值 (图片url)
    tempForm.appendChild(hideInput); //赋值所有元素
        
      //  以下是跳转页面需要的第二个参数,方式和相同,如果多个参数,依次创建多个隐藏域
    var hideInput = document.createElement("input");
    hideInput.type = "hidden";
    hideInput.name = "content";
    hideInput.value = con;
    tempForm.appendChild(hideInput);

    if(document.all){ // 兼容不同浏览器
    tempForm.attachEvent("onsubmit",function(){}); //IE
    }else{
    tempForm.addEventListener("submit",function(){},false); //firefox
    }
    document.body.appendChild(tempForm);
    if(document.all){ // 兼容不同浏览器
    tempForm.fireEvent("onsubmit");
    }else{
    tempForm.dispatchEvent(new Event("submit"));
    }
    tempForm.submit(); //表单提交
    document.body.removeChild(tempForm);
    }
  • 相关阅读:
    [软件工程 2018西北师范大学]实验一 软件工程准备 评分
    【集美大学1411_助教博客】助教总结
    【集美大学1411_助教博客】团队作业10——项目复审与事后分析(Beta版本)
    【集美大学1411_助教博客】团队作业9——测试与发布(Beta版本)
    【集美大学1411_助教博客】团队作业8——第二次项目冲刺(Beta阶段)
    【集美大学1411_助教博客】alpha阶段后 成绩
    Javascript 异步加载详解
    复选框,全选或者全不选
    Java六大必须理解的问题
    写了一个Java的简单缓存模型
  • 原文地址:https://www.cnblogs.com/chenwenjia/p/14717128.html
Copyright © 2020-2023  润新知