Ajax中文乱码解决方法(兼容ie ff)

AJAX的中文乱码可以大概分为两中,第一种是向服务器端发送中文参数时 (xmlhttp.open(“get|post”,url,true)),服务器端接收到的为乱码,这个也是我今天遇到的问题,没做处理之前,在IE里 是正常的,但是在Firefox里面就出现了乱码,我先把接收到参数输出到一个文本里,没有发现什么问题,郁闷了,然后我就把查询语句在输出来观察(我这 里是要从数据库里查出与参数相关的东西),终于发现问题,IE和Firefox输出的参数不一样,虽然汉字上都一样,但是和前后连接上有细小的区别,于是 认定了是编码问题,在网上查找了相关资料,都没能解决问题,但是得到一些启示,因为AJAX发送数据都是采用UTF-8编码的方式发送的,所以要在服务器 端进行编码转换(我这里页面是采用GB2312编码的,如果是采用UTF-8的话应该不会有这步的问题),所以我在服务器端进行了UTF-8转 GB2312,

$str=iconv("UTF-8","GB2312",$str);

然后测试,在Firefox上顺利解决了问题,以为大公告成了,可是再到IE下测试,发现IE又出现了问题,服务器端接收到的参数没值,这下就郁闷 了,突然看到发送头设置了setRequestHeader("Content-Type","application/x-www-form- urlencoded");,就找到问题所在了,然后就在发送那里进行了参数编码:

geturl=encodeURI(geturl);

geturl=encodeURI(geturl); //两次也可以写成geturl=encodeURI(encodeURI(geturl));

xmlhttp.open("GET",geturl,true);

然后再到服务器端进行URL解码:

$str=urldecode($str); //解码

$ str =iconv("UTF-8","GB2312",$ str); //编码转换

注意:解码必须在编码转换前面,不然得不到正确值

保存测试,IE和Firefox都能正常了。

第二种就是服务器端向客户端输出中文时出现乱码,这类问题网上的答案就比较多了,也都能解决,为了避免各位再去查找,我在这里就COPY下J

原因:AJAX在接收responseText或responseXML的值的时候是按照UTF-8的格式来解码的,如果服务器段发送的数据不是UTF-8的格式,那么接收responseText或responseXML的值有可能为乱码。

欢迎访问http://www.xiangha.com


解决办法:

在服务器指定发送数据的格式:
在jsp文件中:
response.setContentType("text/text;charset=UTF-8");//返回的是txt文本文件
或是
response.setContentType("text/xml;charset=UTF-8");//返回的xml文件

PHP:header('Content-Type:text/html;charset=GB2312');
ASP:Response.Charset("GB2312")
JSP:response.setHeader("Charset","GB2312");

AJAX的中文乱码可以大概分为两中,第一种是向服务器端发送中文参数时 (xmlhttp.open(“get|post”,url,true)),服务器端接收到的为乱码,这个也是我今天遇到的问题,没做处理之前,在IE里 是正常的,但是在Firefox里面就出现了乱码,我先把接收到参数输出到一个文本里,没有发现什么问题,郁闷了,然后我就把查询语句在输出来观察(我这 里是要从数据库里查出与参数相关的东西),终于发现问题,IE和Firefox输出的参数不一样,虽然汉字上都一样,但是和前后连接上有细小的区别,于是 认定了是编码问题,在网上查找了相关资料,都没能解决问题,但是得到一些启示,因为AJAX发送数据都是采用UTF-8编码的方式发送的,所以要在服务器 端进行编码转换(我这里页面是采用GB2312编码的,如果是采用UTF-8的话应该不会有这步的问题),所以我在服务器端进行了UTF-8转 GB2312,

$str=iconv("UTF-8","GB2312",$str);

然后测试,在Firefox上顺利解决了问题,以为大公告成了,可是再到IE下测试,发现IE又出现了问题,服务器端接收到的参数没值,这下就郁闷 了,突然看到发送头设置了setRequestHeader("Content-Type","application/x-www-form- urlencoded");,就找到问题所在了,然后就在发送那里进行了参数编码:

geturl=encodeURI(geturl);

geturl=encodeURI(geturl); //两次也可以写成geturl=encodeURI(encodeURI(geturl));

xmlhttp.open("GET",geturl,true);

然后再到服务器端进行URL解码:

$str=urldecode($str); //解码

$ str =iconv("UTF-8","GB2312",$ str); //编码转换

注意:解码必须在编码转换前面,不然得不到正确值

保存测试,IE和Firefox都能正常了。

第二种就是服务器端向客户端输出中文时出现乱码,这类问题网上的答案就比较多了,也都能解决,为了避免各位再去查找,我在这里就COPY下J

原因:AJAX在接收responseText或responseXML的值的时候是按照UTF-8的格式来解码的,如果服务器段发送的数据不是UTF-8的格式,那么接收responseText或responseXML的值有可能为乱码。


解决办法:

在服务器指定发送数据的格式:
在jsp文件中:
response.setContentType("text/text;charset=UTF-8");//返回的是txt文本文件
或是
response.setContentType("text/xml;charset=UTF-8");//返回的xml文件

PHP:header('Content-Type:text/html;charset=GB2312');
ASP:Response.Charset("GB2312")
JSP:response.setHeader("Charset","GB2312");

欢迎访问http://www.xiangha.com

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="weaver.general.Util"%> <%@page import="weaver.conn.RecordSet"%> <%@page import="com.alibaba.fastjson.JSONObject"%> <%@page import="com.alibaba.fastjson.JSONArray"%> <%@page import="java.net.URLEncoder"%> <% request.setCharacterEncoding("UTF-8"); // 基础参数 String pddhRaw = Util.null2String(request.getParameter("PDDH")); String pddh = "0"; try { pddh = String.valueOf(Integer.parseInt(pddhRaw)); } catch(Exception e){ pddh = "0"; } // 查询参数(做简单清洗,避免注入/通配符滥用) String q_zcbm = Util.null2String(request.getParameter("q_zcbm")).replaceAll("[%'_]", ""); String q_syr = Util.null2String(request.getParameter("q_syr")).replaceAll("[%'_]", ""); String q_sybm = Util.null2String(request.getParameter("q_sybm")).replaceAll("[%'_]", ""); // 组装 SQL StringBuilder sql = new StringBuilder(); sql.append("select zcmc,zcbm,zcqc,zcgz,zclz,zcfl,ppxh,syr,sybm,rkrq,pdbz,zczt,pdsj,zcgs ") .append("from uf_CKBGQD where pddh=").append(pddh); if(q_zcbm.length()>0){ sql.append(" and zcbm like '%").append(q_zcbm).append("%'"); } if(q_syr.length()>0 ){ sql.append(" and syr like '%").append(q_syr ).append("%'"); } if(q_sybm.length()>0){ sql.append(" and sybm like '%").append(q_sybm).append("%'"); } // 查询 JSONArray jsonArray = new JSONArray(); RecordSet rs = new RecordSet(); rs.execute(sql.toString()); while(rs.next()){ JSONObject row = new JSONObject(); row.put("zcmc", rs.getString("zcmc")); row.put("zcbm", rs.getString("zcbm")); row.put("zcqc", rs.getString("zcqc")); row.put("zcgz", rs.getString("zcgz")); row.put("zclz", rs.getString("zclz")); row.put("zcfl", rs.getString("zcfl")); row.put("ppxh", rs.getString("ppxh")); row.put("syr", rs.getString("syr")); row.put("sybm", rs.getString("sybm")); // 使用部门 row.put("rkrq", rs.getString("rkrq")); row.put("pdbz", rs.getString("pdbz")); row.put("zczt", rs.getString("zczt")); row.put("pdsj", rs.getString("pdsj")); row.put("zcgs", rs.getString("zcgs")); // 资产归属 jsonArray.add(row); } // 把数据输出给前端 JS 使用(便于导出/前端处理) String dataJson = jsonArray.toJSONString(); %> <!DOCTYPE html> <html> <head> <title>查看报告</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="/cloudstore/resource/pc/com/v1/index.min.css?v=1715806801819"> <link rel="stylesheet" href="/cloudstore/resource/pc/com/v1/ecCom.min.css?v=1715806801819"> <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js" charset="gb2312"></script> <script type="text/javascript" src="/js/jquery/jquery-3.7.1.min.js"></script> <style> .toolbar { display:flex; gap:8px; align-items:center; padding:10px 0; flex-wrap:wrap; } .toolbar input { height:32px; padding:0 8px; } .toolbar .btn { height:32px; padding:0 12px; border:1px solid #d9d9d9; border-radius:4px; background:#fff; cursor:pointer; } .toolbar .btn.primary { background:#1677ff; color:#fff; border-color:#1677ff; } .action-link { color:#1677ff; cursor:pointer; } </style> </head> <body style="width:100%; height:100%;"> <div id="container"> <div class="coms-mode-docker coms-mode-search"> <div id="cube_search_9"> <div class="ant-spin-nested-loading"> <div class="ant-spin-container"> <div style="height: 100%;"> <div class="wea-new-top-content" style="height: 691.175px; overflow-y: hidden;"> <div class="cube-list-wrapper"> <!-- 查询工具条 & 导出 --> <form id="queryForm" method="get" class="toolbar"> <input type="hidden" name="PDDH" value="<%=pddh%>" /> <label>物料编码:</label> <input type="text" name="q_zcbm" value="<%=q_zcbm%>" placeholder="支持模糊查询"> <label>使用人:</label> <input type="text" name="q_syr" value="<%=q_syr%>" placeholder="支持模糊查询"> <label>使用部门:</label> <input type="text" name="q_sybm" value="<%=q_sybm%>" placeholder="支持模糊查询"> <button type="submit" class="btn primary">查询</button> <button type="button" class="btn" id="btnReset">重置</button> <button type="button" class="btn" id="btnExport">导出当前结果</button> </form> <div class="wea-new-table cube-list-table pageAutoWrap"> <div style="width: 100%; height: 100%;"> <div class="cube-list-table clearfix"> <div class="ant-spin-nested-loading"> <div class="ant-spin-container"> <div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left"> <div class="ant-table-content" style="padding-left: 0px; padding-right: 0px;"> <div class="ant-table-scroll"> <span> <div class="ant-table-header" style="overflow-x: scroll; margin-bottom: 0px !important; padding-bottom: 0px !important;"> <table class="ant-table-fixed" style="width: 100%;"> <colgroup> <col style="width: 14%"> <col style="width: 10%"> <col style="width: 14%"> <col style="width: 8%"> <col style="width: 8%"> <col style="width: 8%"> <col style="width: 10%"> <col style="width: 8%"> <col style="width: 10%"> <col style="width: 8%"> <col style="width: 8%"> <col style="width: 10%"> </colgroup> <thead class="ant-table-thead"> <tr style="height: 41.6px;"> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">物料编码</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产名称</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产全称</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产类属</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产归属</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产分类</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">品牌/型号</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">使用人</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">使用部门</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">入库日期</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">资产状态</span></th> <th class="react-resizable"><span class="ant-table-column-sorterN text-elli">操作</span></th> </tr> </thead> </table> </div> <div class="ant-table-body" style="overflow: auto scroll; max-height: 600px; min-height: auto;"> <table class="ant-table-fixed" style="width: 100%;" id="dataTable"> <colgroup> <col style="width: 14%"> <col style="width: 10%"> <col style="width: 14%"> <col style="width: 8%"> <col style="width: 8%"> <col style="width: 8%"> <col style="width: 10%"> <col style="width: 8%"> <col style="width: 10%"> <col style="width: 8%"> <col style="width: 8%"> <col style="width: 10%"> </colgroup> <tbody class="ant-table-tbody"> <% if(jsonArray.size()>0){ for(int i=0;i<jsonArray.size();i++){ %> <tr class="ant-table-row ant-table-row-level-0"> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("zcbm")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("zcmc")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("zcqc")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("zclz")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("zcgs")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("zcfl")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("ppxh")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("syr")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("sybm")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("rkrq")%></span></td> <td class="react-resizable"><span class="wea-url"><%=jsonArray.getJSONObject(i).getString("zczt")%></span></td> <td class="react-resizable"> <span class="action-link" onclick="onDelete(this)">删除</span> </td> </tr> <% } } %> </tbody> </table> </div> </span> </div> </div> </div> </div> </div> <!-- ant-spin-container --> </div> </div> </div> <!-- table wrap --> </div> </div> </div> </div> </div> <!-- spin --> </div> </div> </div> <script> // 前端可用数据(用于导出) const tableData = <%=dataJson%>; // 重置查询 $("#btnReset").on("click", function(){ const base = location.pathname + "?PDDH=<%=pddh%>"; location.href = base; }); // 一键导出(把当前结果导成 CSV) $("#btnExport").on("click", function(){ if(!tableData || tableData.length === 0){ alert("没有可导出的数据"); return; } const headers = ["物料编码","资产名称","资产全称","资产类属","资产归属","资产分类","品牌/型号","使用人","使用部门","入库日期","资产状态","盘点备注","盘点时间"]; const keys = ["zcbm","zcmc","zcqc","zclz","zcgs","zcfl","ppxh","syr","sybm","rkrq","zczt","pdbz","pdsj"]; // CSV 内容,含 BOM 以防中文乱码(Excel 友好) let csv = "\uFEFF" + headers.join(",") + "\n"; tableData.forEach(r=>{ const row = keys.map(k=>{ let val = (r[k] ?? "").toString().replace(/"/g,'""'); // 若包含逗号/引号/换行,按 CSV 规范用引号包裹 if(/[",\n]/.test(val)){ val = `"${val}"`; } return val; }).join(","); csv += row + "\n"; }); const blob = new Blob([csv], {type: "text/csv;charset=utf-8;"}); const url = URL.createObjectURL(blob); const a = document.createElement("a"); const ts = new Date(); const pad = n=> String(n).padStart(2,"0"); const name = `盘点清单_${ts.getFullYear()}${pad(ts.getMonth()+1)}${pad(ts.getDate())}_${pad(ts.getHours())}${pad(ts.getMinutes())}${pad(ts.getSeconds())}.csv`; a.href = url; a.download = name; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); // 删除:把该行的“物料编码”传给后端 function onDelete(el){ const $tr = $(el).closest("tr"); const zcbm = $tr.find("td").eq(0).text().trim(); // 第1列就是物料编码 if(!zcbm){ alert("未找到物料编码"); return; } if(!confirm("确认删除物料编码为【"+zcbm+"】的记录吗?")) return; // // TODO: 把 URL 换成你后端实际的删除接口 // $.ajax({ // url: "/api/ckbgqd/delete", // 例如:新建一个 Servlet/JSP 接口去处理删除 // type: "POST", // data: { zcbm: zcbm, pddh: "<%=pddh%>" }, // success: function(res){ // // 这里按你的后端返回格式调整 // // 假设返回 {success:true,msg:"ok"} // try{ // const r = typeof res === "string" ? JSON.parse(res) : res; // if(r.success){ // $tr.remove(); // }else{ // alert(r.msg || "删除失败"); // } // }catch(e){ // // 如果不是 JSON,就当成功处理 // $tr.remove(); // } // }, // error: function(){ // alert("请求失败,请稍后重试"); // } // }); var pddh = "<%=pddh%>"; <% String sql = "delete from uf_CKBGQD where pddh ='"<%=pddh%>"' and zcbm ="+"'"+zcbm+"'"; RecordSet rs1 = new RecordSet(); rs1.execute(rs1); %> } </script> </body> </html> 这个有错误,帮修复一下
最新发布
10-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值