使用AJAX实现UTF8编码表单提交到GBK编码脚本无乱码的解决方法（使用ajax jsp计算三角形面积）深度揭秘

文章摘要

本文介绍了解决表单编码乱码问题的方法。主要讨论了不同编码（GBK和UTF8）表单在提交过程中可能导致的乱码问题，以及通过调整表单Action地址和修改input字段来实现无乱码提交的解决方案。用户无需对页面进行其他调整，只需在表单中添加两个特定的input字段即可，具体包括`ConvertCallBack`和`ConvertItems`字段，并设置其值为对应的转换参数。这种方法能够有效解决GBK表单和UTF8表单在提交到不同编码脚本时的乱码问题，确保数据正确传输。

1、表单项目1 GBK编码格式

用户采集单是GBK编码，通过GET/POST提交上来的数据也是GBK格式，无需做任何处理

测试源码

2、表单项目2 UTF8编码格式（可以在不同的域名下）

用户采集单是UTF8编码，通过GET/POST提交上来的数据也是UTF8格式，用表单项目1中的程序接收到的是乱码

测试代码(修改前，提交乱码)：

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF8″> </head> <body> <li><a href=”https://www.jb51.net/article/gbkForm.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >GBK同编码表单不乱码</a> <li><a href=”https://www.jb51.net/article/utf8Form.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >UTF8表单修改前乱码</a> <li><a href=”https://www.jb51.net/article/utf8FormRepair.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >UTF8表单修改为AJAX方案后不乱码</a> <li><a href=”https://www.jb51.net/article/otherForm.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >其他GBK同编码表单不乱码</a> <li><a href=”http://www.miaoqiyuan.cn/p/utf8-submit-gbk-ajax-autocharset” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >测试程序说明</a></a> <hr /> <h2>GET:</h2> <form action=”gbkSubmit.asp” method=”GET” > QQ:<input name=”qq” value=”QQ” /><br /> 姓名：<input name=”name” value=”姓名”/><br /> 地址：<input name=”address” value=”地址地址地址”/><br /> <button type=”submit”>UTF8表单提交到GBK脚本后会乱码</button> </form> <h2>POST:</h2> <form action=”gbkSubmit.asp” method=”POST” > QQ:<input name=”qq” value=”QQ” /><br /> 姓名：<input name=”name” value=”姓名”/><br /> 地址：<input name=”address” value=”地址地址地址”/><br /> <button type=”submit”>UTF8表单提交到GBK脚本后会乱码</button> </form> </body> </html>

不需要改变页面编码，只需要修改表单Action地址，增加name=”ConvertCallBack” value=”ProjectA/FormGBK”、name=”ConvertItems” value=”name,qq,bb” 的两个 input即可，不用对页面进行其他调整

编码设置，转换器自动操作。

测试代码(修改后)

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF8″> </head> <body> <li><a href=”https://www.jb51.net/article/gbkForm.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >GBK同编码表单不乱码</a> <li><a href=”https://www.jb51.net/article/utf8Form.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >UTF8表单修改前乱码</a> <li><a href=”https://www.jb51.net/article/utf8FormRepair.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >UTF8表单修改为AJAX方案后不乱码</a> <li><a href=”https://www.jb51.net/article/otherForm.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >其他GBK同编码表单不乱码</a> <li><a href=”http://www.miaoqiyuan.cn/p/utf8-submit-gbk-ajax-autocharset” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >测试程序说明</a></a> <hr /> <h2>GET:</h2> <form action=”convert/utf8.asp” method=”GET” > QQ:<input name=”qq” value=”QQ” /><br /> 姓名：<input name=”name” value=”姓名”/><br /> 地址：<input name=”address” value=”地址地址地址”/><br /> <input name=”ConvertCallBack” value=”https://www.jb51.net/gbkSubmit.asp” /> <input name=”ConvertItems” value=”name,qq,address” /> <button type=”submit”>AJAX转码方案</button> </form> <h2>POST:</h2> <form action=”convert/utf8.asp” method=”POST” > QQ:<input name=”qq” value=”QQ” /><br /> 姓名：<input name=”name” value=”姓名”/><br /> 地址：<input name=”address” value=”地址地址地址”/><br /> <input name=”ConvertCallBack” value=”https://www.jb51.net/gbkSubmit.asp” /> <input name=”ConvertItems” value=”name,qq,address” /> <button type=”submit”>AJAX转码方案</button> </form> </body> </html>

3、表单项目3 GBK编码格式（可以在不同的域名下）

没有任何影响，只要按照表单1的标准编写参数即可

测试代码：

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”GB2312″> </head> <body> <li><a href=”https://www.jb51.net/article/gbkForm.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >GBK同编码表单不乱码</a> <li><a href=”https://www.jb51.net/article/utf8Form.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >UTF8表单修改前乱码</a> <li><a href=”https://www.jb51.net/article/utf8FormRepair.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >UTF8表单修改为AJAX方案后不乱码</a> <li><a href=”https://www.jb51.net/article/otherForm.html” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >其他GBK同编码表单不乱码</a> <li><a href=”http://www.miaoqiyuan.cn/p/utf8-submit-gbk-ajax-autocharset” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” >测试程序说明</a></a> <hr /> <h2>GET:</h2> <form action=”gbkSubmit.asp” method=”GET” > QQ:<input name=”qq” value=”QQ” /><br /> 姓名：<input name=”name” value=”姓名”/><br /> 地址：<input name=”address” value=”地址地址地址”/><br /> Other1：<input name=”other1″ value=”Other1″/><br /> Other2：<input name=”other2″ value=”Other2″/><br /> Other3：<input name=”other3″ value=”Other3″/><br /> Other4：<input name=”other4″ value=”Other4″/><br /> Other5：<input name=”other5″ value=”Other5″/><br /> Other6：<input name=”other6″ value=”Other6″/><br /> Other7：<input name=”other7″ value=”Other7″/><br /> Other8：<input name=”other8″ value=”Other8″/><br /> Other9：<input name=”other9″ value=”Other9″/><br /> <button type=”submit”>GBK表单提交到GBK脚本后不会乱码</button> </form> <h2>POST:</h2> <form action=”gbkSubmit.asp” method=”POST” > QQ:<input name=”qq” value=”QQ” /><br /> 姓名：<input name=”name” value=”姓名”/><br /> 地址：<input name=”address” value=”地址地址地址”/><br /> Other1：<input name=”other1″ value=”Other1″/><br /> Other2：<input name=”other2″ value=”Other2″/><br /> Other3：<input name=”other3″ value=”Other3″/><br /> Other4：<input name=”other4″ value=”Other4″/><br /> Other5：<input name=”other5″ value=”Other5″/><br /> Other6：<input name=”other6″ value=”Other6″/><br /> Other7：<input name=”other7″ value=”Other7″/><br /> Other8：<input name=”other8″ value=”Other8″/><br /> Other9：<input name=”other9″ value=”Other9″/><br /> <button type=”submit”>GBK表单提交到GBK脚本后不会乱码</button> </form> </body> </html>

全部测试包下载地址 anycharset_jb51.rar

utf8.asp

<% @codepage=936 %> <% CallBack=Server.Htmlencode(Request(“ConvertCallBack”)) Items=Split(Request(“ConvertItems”),”,”) if len(request.form) > 0 then method=”POST” else method=”GET” end if %><!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”GB2312″> <script src=”http://www.miaoqiyuan.cn/wp-includes/js/jquery/jquery.js”></script> </head> <body> <form action=”<%=CallBack%>” method=”<%=method%>” id=”AutoPOST”> <% for each Item in Items if trim(Item) <> “” then Item=Server.Htmlencode(Item) %><%=Item %> : <textarea name=”<%=Item %>” id=”<%=Item %>”></textarea><br /> <script> jQuery.post(“utf8_convert.asp?MiaoQiYuanAutoConvertItem=<%=Item%>&<%=Request.QueryString%>”,”<%=Request.Form%>”,function(res){ jQuery(“#<%=Item %>”).val(res); }); </script> <% end if next %> <button type=”submit”>Waiting…</button> <script type=”text/javascript”> setTimeout(function(){ jQuery(“#AutoPOST”).submit(); },200); </script> </body> </html>

utf8_convert.asp

<% @codepage=65001 %> <% function NotXSS(html) NotXSS=html NotXSS=replace(NotXSS, “<“, “<“) NotXSS=replace(NotXSS, “>”, “>”) NotXSS=replace(NotXSS, “”””, “”e;”) end function ‘防止参数冲突，使用了 MiaoQiYuanAutoConvertItem Response.Write NotXSS(Request(Request.QueryString(“MiaoQiYuanAutoConvertItem”))) %>

到此这篇关于使用AJAX实现UTF8编码表单提交到GBK编码脚本无乱码的解决方法的文章就介绍到这了,更多相关UTF8编码表单提交到GBK编码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:Ajax的特性及乱码问题Ajax传输中文乱码问题的解决办法Ajax同步和异步问题浅析及解决方法ajax同步异步简单实现Ajax同步与异步传输的示例代码Ajax请求中的异步与同步，需要注意的地方说明AJAX乱码与异步同步以及封装jQuery库实现步骤详解