通过jquery的serializearray处理表单数据成json格式,并提交到后台处理

简介:

422101-20161104164918877-2144399919.png

var params = $("#myform").serializeArray();
var values = {};
for (var item in params) {
   values[params[item].name] = params[item].value;
}
alert(JSON.stringify(values));

完整代码

$("#myform").mvalidate({
    type:1,
    onKeyup:true,
    sendForm:true,
    firstInvalidFocus:true,
    valid:function(event,options){
        event.preventDefault();
        //点击提交按钮时,表单通过验证触发函数
        var params = $("#myform").serializeArray();
        var values = {};
        for (var item in params) {
            values[params[item].name] = params[item].value;
        }

        // 传递到后台
        var user = $api.getStorage('user');
        values.member_id = user.member_id;

        api.ajax({
            url: BASE_SH_REQUEST_URL+'/?g=Api&m=Address&a=addAddress',
            method: 'post',
            data: {
                values: values,
            }
        }, function(json, err) {
            if (json.status == '1') {
                // 添加成功
                alert(JSON.stringify(json.info));
            } else {
                var toast = new auiToast();
                toast.fail({
                    title:json.msg,
                    duration:2000
                });
            }
        });
    },
    descriptions:{
        default:{
            required : '必填字段'
        },
        name:{
            required : '请输入收货人姓名'
        },
        tel : {
            required : '请输入手机号码',
            pattern : '手机号格式不正确'
        },
        seachprov : {
            required : '请选择省、直辖市'
        },
        seachcity : {
            required : '请选择市、直辖区'
        },
        seachdistrict: {
            required : '请选择区/县'
        },
        detail : {
            required : '详情不能为空'
        }
    }
});



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6030897.html,如需转载请自行联系原作者
相关文章
|
5月前
|
XML JSON Java
Android App网络通信中通过okhttp调用HTTP接口讲解及实战(包括GET、表单格式POST、JSON格式POST 附源码)
Android App网络通信中通过okhttp调用HTTP接口讲解及实战(包括GET、表单格式POST、JSON格式POST 附源码)
218 0
|
7月前
|
JSON Java PHP
Spring Boot 一个接口同时支持 form 表单、form-data、json 优雅写法
网上很多代码都是千篇一律的 cvs,相信我只要你认真看完我写的这篇,你就可以完全掌握这个知识点,这篇文章不适合直接 cvs,一定要先理解。
|
JSON 前端开发 数据格式
前端提升生产力系列一(vue3 element-plus 配置json快速生成form表单组件)
在PC端日常的使用中,使用最多的莫过于表单和列表了,故此对table列表和form表单进行了统一的封装,通过json配置就可以快速适配table列表和form表单。
300 0
前端提升生产力系列一(vue3 element-plus 配置json快速生成form表单组件)
|
JSON 前端开发 JavaScript
react + antd 封装通过json数组形式的Form表单
最近在搞react + antd,在弄form表单的时候,觉得没写一次都要重新写一次Form, Form.Item,感觉有些麻烦;就想啊,能不能像vue+element那样通过json配置的方式,实现一个form组件
react + antd 封装通过json数组形式的Form表单
|
JSON JavaScript 数据格式
基于 el-form 封装一个依赖 json 动态渲染的表单控件
先介绍功能,然后演示功能,最后介绍思路和编码方式。
417 0
基于 el-form 封装一个依赖 json 动态渲染的表单控件
|
JSON JavaScript 数据格式
Vue3组件(九)Vue3+element+json实现一个动态渲染的表单控件
这个表单控件是基于 element-plus 的 el-form 做的二次封装,所以首先感谢 element-plus 提供了这么强大的UI库,以前用 jQuery 做过类似的,但是非常麻烦,既不好看,可维护性、扩展性也差,好多想法都实现不了(技术有限)。
1545 0
Vue3组件(九)Vue3+element+json实现一个动态渲染的表单控件
|
JSON JavaScript 数据格式
基于el-form封装一个依赖 json 动态渲染的表单控件(二)
先介绍功能,然后演示功能,最后介绍思路和编码方式。
基于el-form封装一个依赖 json 动态渲染的表单控件(二)
|
JSON 数据格式
基于el-form封装一个依赖 json 动态渲染的表单控件(一)
先介绍功能,然后演示功能,最后介绍思路和编码方式。
基于el-form封装一个依赖 json 动态渲染的表单控件(一)
|
Web App开发 JSON JavaScript
Form表单 JSON Content-type解析
1 表单Form概述 在Form表单中,参数一般有: action 表单提交的url method 提交方式:post get name 表单的属性名 encty...