ajax提交form表单数据serialize转为JSON（ajax提交form表单数据到数据库）

25-03-29 5

对于ajax提交form表单数据serialize转为JSON感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍ajax提交form表单数据到数据库，并为您提供关于Ajaxserialize()提

对于ajax提交form表单数据serialize转为JSON感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍ajax提交form表单数据到数据库，并为您提供关于Ajax serialize()提交form表单不能上传file类型、ajax中post提交form所有元素序列化提交方法.serialize();、ajax如何提交form表单数据？ajax提交form表单数据的方法介绍、ajax异步、同步问题，KindEditor ajax提交内容，ajax提交form表单的有用信息。

本文目录一览：

ajax提交form表单数据serialize转为JSON（ajax提交form表单数据到数据库）
Ajax serialize()提交form表单不能上传file类型
ajax中post提交form所有元素序列化提交方法.serialize();
ajax如何提交form表单数据？ajax提交form表单数据的方法介绍
ajax异步、同步问题，KindEditor ajax提交内容，ajax提交form表单

ajax提交form表单数据serialize转为JSON（ajax提交form表单数据到数据库）

在用ajax提交表单数据时，我们常需要将form表单数据转为JSON格式，这样后端控制器可以方便的将JSON字符串转为Bean形式。

在此提供一小段代码1，让你快速的将form表单数据转为JSON格式。

function getFormData($form) {
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array,function (n,i) {
      indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
}

当你需要将form表单传递给Controller之后，则可以：

function submitForm() {
    $.ajax({
      type: 'post',url: '',contentType: 'application/json',dataType: 'json',data: JSON.stringify(getFormData($form)),success: function (result) {
        //正确处理
      },error: function () {
        //错误处理
      }
    });
  }

后端的Controller可以采用@RequestBody来接收JSON字符串，并自动转为对应的Bean。

参考资料

https://stackoverflow.com/questions/11338774/serialize-form-data-to-json ↩

Ajax serialize()提交form表单不能上传file类型

前台form表单的提交方式有很多种，例如：
1. form表单submit直接提交的方法
2. Ajax提交的方法
3. jquery提交的方法
4. 原生js提交的方法

每一种方法都有它的优势和不足，有的简单直接，有的写起来复杂，但用起来顺手，最近项目中遇到了一个Ajax 表单提交问题，在这里总结一下ajax提交的两种方式：

1.serialize() 方法：

通过序列化表单值，创建 URL 编码文本字符串。我们可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
所用到的语法为：

$("form").serialize()

这里的$(“form”)操作对象是代表表单元素集合的 jQuery 对象，而不是js对象。

提交方法的代码段：

$(''form'').submit(function() {
  alert($(this).serialize());
  return false;
});

最终序列化后，表单中数据会一下面这种方式提交到后台：a=1&b=2&c=3&d=4&e=5
这种方式处理表单时所适用的input标签类型是有限的，只适用于一些常用的类型例如text、checkbox、select、date等等，但是对于file文件类型的input框并不适用，那我们在用到ajax提交方式的时候应该如何提交file类型的input框数据呢?

2.封装FormData 对象，直接用$.ajax提交

论坛上有人提及到FormData的封装方式，将form表单中的内容封装成formdata的数据格式
FormData 对象可以把form中所有表单元素的name与value组成一个queryString，提交到后台，在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

FormData的使用方法也是非常简单，直接传入form表单对象即可，如下：

var form = $(''#form1'');  
var formdata = new FormData(form);

使用这种方式将数据封装后，file类型的文件数据即可以键值对的方式封装在formdata中，然后用ajx提交，方法如下：

$.ajax({  
        type : "POST",  
        url : "houtai/123.do",  
        data : formData,
        async: false,  
        cache: false,  
        contentType: false,  
        processData: false,
        success : function(msg) {  
            if(msg){
            alert(''提交成功！'');
            } 
        }  
});

有一点需要注意的是，以formdata的方式提交时需要添加async: false, 同步，否则后台无法接收到前台传过来的file文件数据，这样的提交方式，既可以提交任何一种type类型标签，又可以在提交之后得到返回结果，方便快捷又实用。

关于form表单提交的方式还有很多很多，本文只是关于ajax的两种提交方式总结，希望以后还可以遇到更好用的提交方式或者提交插件。

ajax中post提交form所有元素序列化提交方法.serialize();

总结

以上是小编为你收集整理的ajax中post提交form所有元素序列化提交方法.serialize();全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

ajax如何提交form表单数据？ajax提交form表单数据的方法介绍

对于form表单数据的提交，我们一般都会想到使用ajax提交，那么，ajax如何来提交form表单数据呢？接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法，有需要的伙伴可以参考一下。

话不多说，我们直接来看正文~

ajax提交form表单数据可以分为两种，一种是无返回结果的，就是将表单数据提交给后台，后台处理完就完了；另一种就是有返回结果的，后台执行成功或失败的信息需要返回到前台。

ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。

ajax提交form表单数据有返回结果的实现方式：将form表单数据序列化

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $(&#39;#form1&#39;).serialize(),                
                success: function (result) {                    
                console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },                
                error : function() {
                    alert("异常！");
                }
            });
        }    </script></head><body><div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
    </form></div></body></html>

登录后复制

注意：这种方式提交form表单数据需要注意的是form表单中的项一定要有name属性，后台获取的键值对为key=name值，value=各项值，注意无论是input标签还是span或者是其他标签，一定要有name属性，没有name属性后台是获取不到该项的。、

以上就是本篇文章的全部内容了，更多精彩内容大家可以参考PHP中文网其他栏目！！！

以上就是ajax如何提交form表单数据？ajax提交form表单数据的方法介绍的详细内容，更多请关注php中文网其它相关文章！

ajax异步、同步问题，KindEditor ajax提交内容，ajax提交form表单

如果ajax不采用异步，整个js代码在服务器返回结果前都将阻塞，alert方法除外

lookUp('lookUp','',100,300,3);

showMessage('lookUp','false',false,-1);

alert();

callAjaxByName();

title = title? title:"编辑";

$(".modal-title").html(title);

$("#myModal").modal("show");

红色部分将在ajax返回结果后在执行

当用Ajax提交表单时，KindEditor的内容获取不到，HTML数据获取不了

原因：当ajax提交时，KindEdito的HTML数据还没有同步到表单中来，

KindEditor同时提供了方法：

afterBlur

编辑器失去焦点(blur)时执行的回调函数。

数据类型: Function

默认值: 无

解决方案：

KindEditor.ready(function (K) {

window.editor = K.create('#AContent',{

afterBlur: function () { this.sync(); }

});

</script>

ajax提交form：$('#'+iFormId).serialize();

今天关于ajax提交form表单数据serialize转为JSON和ajax提交form表单数据到数据库的讲解已经结束，谢谢您的阅读，如果想了解更多关于Ajax serialize()提交form表单不能上传file类型、ajax中post提交form所有元素序列化提交方法.serialize();、ajax如何提交form表单数据？ajax提交form表单数据的方法介绍、ajax异步、同步问题，KindEditor ajax提交内容，ajax提交form表单的相关知识，请在本站搜索。

本文标签：