JavaEE--jQuery序列化表单数据

一、serialize() 方法

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中,这样在ajax提交表单数据时,就不用一一列举每一个参数,只需将data参数设置为:$("form").serialize()即可。

//语法
$(selector).serialize()

输出标准的查询字符串:a=1&b=2&c=3&d=4&e=5
注释:只会将“成功的控件”序列化为字符串。(即指没被禁用的元素)如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

  1. HTML页面

    添加管理员
    




  1. Servlet
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //输入,请求乱码
        request.setCharacterEncoding("utf-8");
        //输出 响应 乱码
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("utf-8");
        String adminName = request.getParameter("adminName");
        String password = request.getParameter("password");
        Admin admin = new Admin();
        admin.setAdminName(adminName);
        admin.setPassword(password);
        AdminService adminService = new AdminServiceImpl();
        PrintWriter writer = response.getWriter();
        if (adminService.register(admin)) {
            writer.print("成功");
        } else {
            writer.print("失败");
        }
    }

二、serializeObject()方法

  1. 自定义方法
   //给jQuery添加一个方法
     jQuery.fn.serializeObject = function () {
        var formData = {};
        var formArray = this.serializeArray();
         for(var i = 0, n = formArray.length; i < n; ++i){
             formData[formArray[i].name] = formArray[i].value;
         }
         return formData;
    };

把form表单的值序列化成一个json对象,如{username:admin,password:admin123}

  1. HTML

    添加管理员
    




  1. Servlet
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //输入,请求乱码
        request.setCharacterEncoding("utf-8");
        //输出 响应 乱码
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("utf-8");
        // 读取请求内容
        BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream(),"utf-8"));
        String line = null;
        StringBuilder sb = new StringBuilder();
        while ((line = br.readLine()) != null) {
            sb.append(line);
        }
        //将json字符串转换为json对象
        JSONObject json=JSONObject.parseObject(sb.toString());
        Admin admin=json.toJavaObject(Admin.class);
        System.out.print(admin.getAdminName());
    }

三、serializeArray() 方法

serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

//格式:
var jsonData = $("form").serializeArray();

注意:此方法返回的是 JSON 对象而非 JSON 字符串。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。
注意:1、不被禁用;2、包含name属性

四、 JSON.parse()

将字符串解析成Json对象

五、 JSON.stringify()

将Json对象解析成字符串

你可能感兴趣的:(JavaEE--jQuery序列化表单数据)