zoukankan      html  css  js  c++  java
  • 页面跳转,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);
    }
  • 相关阅读:
    [WWF]相关资料整理
    [CSharp]经常遇到字符编码转换的问题
    [BizTalk]BizTalk Server 2004的监控和管理
    [Linux]删除目录
    [BizTalk]好用的BizTalk管理工具
    [JWF]使用脚本访问ActiveDirectory(一)ADODB
    [BizTalk][Why]持久化数据库的状态时出现异常
    [BizTalk]关于BizTalk中的命名规则
    FTP连接
    [导入]跟踪BTSWebSvcWiz.exe的执行过程
  • 原文地址:https://www.cnblogs.com/chenwenjia/p/14717128.html
Copyright © 2011-2022 走看看