js常出现的问题与解决方法之一

最新推荐文章于 2022-07-19 23:14:25 发布

火苗战神

最新推荐文章于 2022-07-19 23:14:25 发布

阅读量502

点赞数 1

分类专栏： jsp html js 文章标签： js

本文链接：https://blog.csdn.net/zhao923822745/article/details/78962177

版权

html 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

jsp

3 篇文章 0 订阅

订阅专栏

1.前后台中文乱码的问题
问题描述：前台后台用get传值，中间出现中文，传值传到后台成为乱码。
解决方案：前台js转化，注意是对参数的转化。

//前台
encodeURI(encodeURI("参数值"));
//后台

username = URLDecoder.decode(username, "UTF-8");

2.前后台传值原来get方法转化为post方法提交请求。
问题描述：在做项目的过程中出现参数传值过长或者链接上能够看到传递的一些重要信息。
解决方案：把get方法转化为post，通过js动态模拟一个表单提交。

function openPostWindow(url, data, name,ids) {
             var tempForm = document.createElement("form");
              tempForm.id="tempForm1";
             tempForm.method="post";
             tempForm.action=url;
             tempForm.target=name;
            var  str  = ids.split("-");
            var datas = data.split("-")
            for(var a=0;a<str.length;a++){
                var hideInput = document.createElement("input");
                hideInput.type="hidden";
                hideInput.name= str[a];
                hideInput.value= datas[a];
                tempForm.appendChild(hideInput);
            }
            if(isIE()){
             tempForm.attachEvent("onsubmit",function(){ openWindow(name); });
            }else{
             tempForm.attachEventListener("onsubmit",function(){ openWindow(name); });
            }

              document.body.appendChild(tempForm);
             if(isIE())
             tempForm.fireEvent("onsubmit");
             tempForm.submit();
             document.body.removeChild(tempForm);
         }

function openWindow(name)
      {
             window.open('about:blank',name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');
          }

3.判断浏览器是否是IE浏览器
问题描述：在书写表单的过程中发现有些样式或者js方法不兼容问题。
解决方案：通过js判断是什么浏览器，分开进行处理

此函数可区分ie5.5~ie8、Chrome、Opera、Safair、Firefox这5种常见浏览器。 
[code lang="js"] 
function browser (){ 
var ua=window.navigator.userAgent, 
ret=""; 
if(/Firefox/g.test(ua)){ 
ua=ua.split(" "); 
ret="Firefox|"+ua[ua.length-1].split("/")[1]; 
}else if(/MSIE/g.test(ua)){ 
ua=ua.split(";"); 
ret="IE|"+ua[1].split(" ")[2]; 
}else if(/Opera/g.test(ua)){ 
ua=ua.split(" "); 
ret="Opera|"+ua[ua.length-1].split("/")[1]; 
}else if(/Chrome/g.test(ua)){ 
ua=ua.split(" "); 
ret="Chrome|"+ua[ua.length-2].split("/")[1]; 
}else if(/^apple\s+/i.test(navigator.vendor)){ 
ua=ua.split(" "); 
ret="Safair|"+ua[ua.length-2].split("/")[1]; 
}else{ 
ret="未知浏览器"; 
} 
return ret.split("|"); 
} 
//调用函数，返回一个数组,r[0]是浏览器名称，r[1]是版本号 
var r=browser(); 
alert(r); 
[/code]

4.表单信息使用button方式进行提交，不采用submit方式
问题描述：有些方法需要采用ajax方式进行提交，这样就不能直接采用提交表单方式进行提交
解决方案：获取表单的信息，进行序列化，然后以参数的形式进行提交。

  ajaxJson(actionUrl + "?datagrid", $("#searchForm").serialize(), function (data) {
        if (assertAjaxSuccess(data)) {
            $("#dataTable").datagrid("loadData", data.dataList);
            $("#pager").pagination({total: data.totalCount, pageSize: data.pagesize, pageNumber: data.pageNum});
            $("#dataTable").datagrid("clearSelections");
        }else{
            return false;
            alertMsg("加载列表失败");
        }
    });

    /**
 * ajaxpost请求 返回json
 * @param url
 * @param data
 * @param f
 */
function ajaxJson(url,data,f){
    $.ajax({
        url:url,
        type:"post",
        data:data,
        dataType:"json",
        cache:false,
        success:function(data){
            f(data);
        }
    });
}



5.表单问题，目前也使用表单移交进行移交，里面总是有几个问题需要注意。
问题描述:我们表单中有一个图片的引入，imput类型是img，总是点击回车的时候就提交。
解决方案：<img>直接用这个标签。

> form表单回车提交问题,JS监听回车事件

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。 
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则： 
   1. 如果表单里有一个type=”submit”的按钮，回车键生效。 
   2. 如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。 
   3. 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。 
   4. 其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。 
   5. type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。 
6.我们在处理表单的页面可以检验他是否点击了按钮来控制下面的程序。if($_POST['submit']){ 如果点击了按钮 程序继续} 
实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办 呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。 
通过以上可知只要把type="submit"改成type="button"然后js提交， 在不要有一个type=”text”的input就行了。就不会发生回车跳转。 
但实验发现
6.剪贴板的使用
问题描述：目前客户提出一个需求，需要把内容粘贴到剪贴板上去。
解决方案：从网上找到一些解决方案。使用clipboard.js，但是不能支持ie，所以我们程序里面加了一些判断。
ie使用如下：
> window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
三个方法
（1）clearData(sDataFormat) 删除剪贴板中指定格式的数据。sDataFormat:"text","url"
（2）getData(sDataFormat) 从剪贴板获取指定格式的数据。 sDataFormat:"text","url"
（3）setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。 sDataFormat:"text","url","file","html","image"，sData: 剪贴数据
但这个对象是只针对IE的。。如果是其它的浏览器呢，则会用不了
谷歌等浏览器如下：
1 引入插件

<script type="text/javascript" src="${pageContext.request.contextPath}/plug-in/code_js/clipboard.js"></script>

“`

2.基本使用：
代码如下（不知道为啥只能这样写了）：input id=”foo” type=”text” value=”hello”>
button class=”btn” data-clipboard-action=”copy” data-clipboard-target=”#foo”>Copy /button>

连接：http://download.csdn.net/download/zhao923822745/10187787