jQuery后台管理系统项目描述 jquery怎么跟后端交互的

转载

mob64ca140d61c6 2024-06-26 11:48:41

文章标签 jQuery后台管理系统项目描述 JQuery Ajax serialize() JSON 文章分类 jQuery 前端开发

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 {