(前端)html页面之间如何通过URL传输参数，并解决中文乱码问题

最新推荐文章于 2025-07-31 12:05:29 发布

转载最新推荐文章于 2025-07-31 12:05:29 发布 · 7.1k 阅读

收录于

java-前端问题

博客主要围绕前端项目遇到的问题展开。一是探讨页面点击按钮后台跳转并传值时，有无更好的URL传值且不暴露数据的方法；二是提出如何解决HTML界面间传递中文参数的乱码问题，并给出使用encodeURI编码、decodeURI解码的解决办法。

原文链接

项目遇到问题：

在这里插入图片描述

由一个页面点击按钮后台跳转另一个页面并将页面的值进行传送：
代码如下：

<button class="mui-btn btn-parent-rights"  onclick="updateold(this)" data-oldid={{id}} >修改老人</button>

js：

//修改老人信息
function updateold(obj) {
    var parname = $(obj).parent().parent().find('.parent-name').html(); //老人姓名
    var parid = $(obj).parent().parent().find('.parent-idCard0').html(); //身份证
    var tel = $(obj).parent().parent().find('.parent-tel').html(); //电话号码
    var addr = $(obj).parent().parent().find('.parent-addr').html(); //老人地址
    var oldid = $(obj).data("oldid");
    var searchUrl =encodeURI("parent-update.html?" +
        "parentname="+parname+"&parentid="+parid+"&telephone="+tel +
        "&address="+addr+"&oldid="+oldid);
    window.location.href =searchUrl;
}

前端页面js：

$(function(){
            manyValues();
        });
        function manyValues(){
            var url=decodeURI(window.location.search);
            if(url.indexOf("?")!=-1){
                var str = url.substr(1 );
                strs = str.split("&");

                var parentName=unescape(strs[0].split("=")[1]);
                var idCard=unescape(strs[1].split("=")[1]);
                var telephone=unescape(strs[2].split("=")[1]);
                var address=unescape(strs[3].split("=")[1]);
                var oldid=unescape(strs[4].split("=")[1]);
                $("#parentName").val(parentName);
                $("#idCard").val(idCard);
                $("#telephone").val(telephone);
                $("#address").val(address);
                $("#oldid").val(oldid);

            }
        }

这样就实现的值的传递，不知道还有没有更好的方法能够实现这种URL传值不暴露数据的方法。