Jquery之Ajax(页面后台间数据交互)

最新推荐文章于 2021-05-23 22:48:15 发布

u010250476

最新推荐文章于 2021-05-23 22:48:15 发布

阅读量300

点赞数

分类专栏： JS 文章标签： JQuery Ajax serialize() JSON 中文乱码 ViewUI

本文链接：https://blog.csdn.net/u010250476/article/details/84413717

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JSP页面表单数据通过Ajax,以json格式发送到后台处理，最后返回json对象，显示在页面上。

原意就打算了解一下json格式数据的传递，没打算做的多复杂，但乱码问题搞得我头都大了。

直接贴代码解释

JS文件

$("#register").click(function(){
        var userFormTemp = $("form").serialize();
        var userFormDecode = decodeURIComponent(userFormTemp,true);
        var userForm = encodeURI(encodeURI(userFormDecode));
        $.ajax({
            type : "post",
            url : "UserServlet",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            data : {user : userForm},
            dataType : "json",
            success : function(data){
                $("#uname").text(data.userName);
                $("#addr").text(data.address);
                $("#pho").text(data.phone);
                $("#hob").text(data.hobby);
            },
            error : function(textStatus,e){
                alert(e.status);
            }
        });
    });

相关行解释：

1.var userFormTemp = $("form").serialize();

学习Ajax时看到这个方法觉得有意思就拿来试验一下，serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。输出的格式为：name=value&name1=value1&name2=value2...

类似于路径后面的参数列表。get方式提交也可以直接加到路径后面传送。

ajax使用与寻常无异，就是数据类型改为json:dataType : "json"。

Form2Json文件

因为要使用json格式传递数据，后台先将序列化表单后的字符串转换成json格式的字符串然后再装换成json对象。

public class Form2Json {
    public JSONObject string2Json(String stringForForm) throws Exception{
        String form2Json[] = stringForForm.split("&");
        String jsonForStringTemp = "";
        for (int i=0;i<form2Json.length;i++){
            int index = form2Json[i].indexOf("=");
            jsonForStringTemp += "\""+form2Json[i].substring(0, index)+"\""
                +":"+"\""+URLDecoder.decode(form2Json[i].substring(index+1,form2Json[i].length()),"UTF-8")+"\""+",";
        }
        String jsonForString = "{" + jsonForStringTemp +"}";
        JSONObject jo = JSONObject.fromObject(jsonForString);
        return jo;
    }
}

主要就是做些字符串的截取。

Servlet文件

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");

        PrintWriter out = response.getWriter();
        String s = request.getParameter("user");
        s = URLDecoder.decode(s,"UTF-8");
        Form2Json f2j = new Form2Json();
        JSONObject jo = null;
        try{
            jo = f2j.string2Json(s);
        }catch(Exception ex){
            ex.printStackTrace();
        }
        out.print(jo);
        out.flush();
        out.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

doGet(request,response);
}

jsp文件

serialize()中文乱码问题解决方法：

1.serialize主动调用了encodeURIComponent()方法进行了编码；；

2.所以得先调用decodeURIComponent()方法进行解码；

3.然后还得两次调用 encodeURI()方法进行编码；

4.后台调用URLDecoder.decode()方法解码；

5.本来应该大概经过上面四步就可以解决中文乱码问题，但不知道为什么，后台获取到的字符串中文还是乱码，(⊙﹏⊙b汗)，于是我就将截取到的字符串再做一次解码，然后...就没然后了。

本来还打算试一下serializeArray() 方法，但看到API里面介绍说serializeArray()返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。所以我就缓缓再看。

追加

其实serializeArray()用法也差不多，因为它得到的是一个JSON对象，所以先得将他解析成字符串，现在较新的浏览器都提供了原生的JSON支持，JSON.stringify()，能将JSON对象解析成JSON格式的字符串。

格式为：

[
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]

后台转换成JSON对象时必须拼接字符串类似格式为：

{“user”:

[
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]

}*/

好吧，我错了。上面注释的一段没用。

因为serializeArray()返回的Array<Object> 格式，后台字符串转换成JSON对象要用JSONArray.fromObject();

附：

JS中

JSON字符串转换为JSON对象

1.eval("(" + value+ ")");

2.value.parseJSON();

3.JSON.parse(value);

JSON对象转化为JSON字符串。

1.obj.toJSONString();

2.JSON.stringify(obj);

JAVA中

。。。。。。

u010250476

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery之Ajax(页面后台间数据交互)

JSP页面表单数据通过Ajax,以json格式发送到后台处理，最后返回json对象，显示在页面上。原意就打算了解一下json格式数据的传递，没打算做的多复杂，但乱码问题搞得我头都大了。直接贴代码解释JS文件$("#register").click(function(){ var userFormTemp = $("form").serialize(); ...
复制链接

扫一扫