码迷,mamicode.com
首页 > Web开发 > 详细

HTML表单数据转JSON

时间:2019-03-12 18:02:05      阅读:778      评论:0      收藏:0      [点我收藏+]

标签:har   BMI   for   sys   ping   input   put   调用   html   

问题描述

  后端使用如下方式接收前端传入参数:

1 @PostMapping(value = "/test", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
2@ResponseBody
3 public Map<String, Object> test(@RequestBody Map<String, Object> map) {
4     System.out.println(map);
5     return map;
6 }

  由于使用了 @RequestBody 注解,所以,前端需要传递 JSON 数据。那么,如何将表单数据快速转换为 JSON 字符串呢?

定义如下通用方法:

 1 function serializeForm(form){
 2     var obj = {};
 3     $.each(form.serializeArray(),function(index){
 4         if(obj[this[‘name‘]]){
 5             obj[this[‘name‘]] = obj[this[‘name‘]] + ‘,‘+this[‘value‘];
 6         } else {
 7             obj[this[‘name‘]] =this[‘value‘];
 8         }
 9     });
10     return obj;
11 }

  以上方法会返回一个 Object,然后再通过 JSON.stringify(obj) 将 JSON 对象转换为 JSON 字符串即可。

  调用 serializeForm() 方法只需要传入 表单对象即可,如: serializeForm($(‘form‘));

<form action="" method="POST" id="myForm">
        userName: <input type="text" name="userName" /><br /> password: <input type="password" name="password" /><br />
        <input type="button" value="Submit" id="btn" />
    </form>

    <script>
        $(function() {
            $(‘#btn‘).click(function () {

                var jsonObj = serializeForm($("form"));

                var jsonStr = JSON.stringify(jsonObj);

                $.ajax({
                    type: ‘POST‘,
                    url: ‘http://localhost:8083/test‘,
                    data: jsonStr,
                    headers: {
                        ‘Content-Type‘: ‘application/json;charset=UTF-8‘
                    },
                    success: function (data) {
                        alert("success: " + data);
                    },
                    error: function (data) {
                        alert("error: " + data);
                    }
                });

                return false;
            });
        });

        function serializeForm(form){
            var obj = {};
            $.each(form.serializeArray(),function(index){
                if(obj[this[‘name‘]]){
                    obj[this[‘name‘]] = obj[this[‘name‘]] + ‘,‘+this[‘value‘];
                } else {
                    obj[this[‘name‘]] =this[‘value‘];
                }
            });
            return obj;
        }
    </script>

 

HTML表单数据转JSON

标签:har   BMI   for   sys   ping   input   put   调用   html   

原文地址:https://www.cnblogs.com/dream-saddle/p/10518110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!