精华内容
下载资源
问答
  • json与表单相互转化

    千次阅读 2010-05-21 12:46:00
    html表单与js的json对应互换。(水平问题,文件类型域没有实现,有会的请指教指教。)。/** * 将form序列化成json字符串,本方法依赖于jquery.js * @param id表单的ID * @return json形式字符串 */function form2...

    html表单与js的json对应互换。(水平问题,文件类型域没有实现,有会的请指教指教。)。

    /**

     * 将form序列化成json字符串,本方法依赖于jquery.js

     * @param id表单的ID

     * @return json形式字符串

     */

    function form2json(id){

     var str = "";

     var temp = new Array();

     //单行文本

     $("#"+id).find("input").filter(":text").each(function(){

      //alert(this.name+":"+this.value);

      str+="/""+this.name+"/":"+"/""+this.value+"/",";

     });

     //单行密码

     $("#"+id).find("input").filter(":password").each(function(){

      //alert(this.name+":"+this.value);

      str+="/""+this.name+"/":"+"/""+this.value+"/",";

     });

     //隐藏

     $("#"+id).find("input").filter(":hidden").each(function(){

      //alert(this.name+":"+this.value);

      str+="/""+this.name+"/":"+"/""+this.value+"/",";

     });

     //下拉列表

     $("#"+id).find("select").each(function(){

      //alert(this.name+":"+this.value);

      str+="/""+this.name+"/":"+"/""+this.value+"/",";

     });

     //单选框

     $("#"+id).find("input").filter(":radio").filter(":checked").each(function(){

      //alert(this.name+":"+this.value);

      str+="/""+this.name+"/":"+"/""+this.value+"/",";

     });

     //复选框,应该写成name=[value1,value2,value3……]这种形式

     var checkboxNames = "";

     $("#"+id).find("input").filter(":checkbox").each(function(){

      if(checkboxNames.indexOf(this.name)==-1){

       checkboxNames+=this.name+",";

      }

     });

     checkboxNames = checkboxNames==""?"":checkboxNames.substring(0, checkboxNames.length-1);

     var arr = checkboxNames.split(",");

     for(var i = 0; i < arr.length; i++){

      var na = arr[i];

      if(na!=""){

       var values = "";

       $("#"+id).find("input").filter(":checkbox").filter(":checked").each(function(){

        if(this.name==na){

         values+=this.value+",";

        }

       });

       values = values==""?"":values.substring(0,values.length-1);

       str+="/""+na+"/":["+values+"],";

      }

     }

     //多行文本

     $("#"+id).find("textarea").each(function(){

      //alert(this.name+":"+this.value);

      str+="/""+this.name+"/":"+"/""+this.value+"/",";

     });

     str = str.replace(/^/s*|/s*$/, "")==""?"":str.substring(0, str.length-1);

     return "{"+str+"}";

    }

    /**

     * 将json对象中的值赋到form中,本方法依赖于jquery.js

     * @param json json对象

     * @param id 表单ID

     * @return

     */

    function json2form(json,id){

     //单行文本

     $("#"+id).find("input").filter(":text").each(function(i){

      $(this).val(json[this.name]?json[this.name]:"");

     });

     //密码框

     $("#"+id).find("input").filter(":password").each(function(i){

      $(this).val(json[this.name]?json[this.name]:"");

     });

     //隐藏框

     $("#"+id).find("input").filter(":hidden").each(function(i){

      $(this).val(json[this.name]?json[this.name]:"");

     });

     //下拉

     $("#"+id).find("select").each(function(i){

      $(this).val(json[this.name]?json[this.name]:"");

     });

     //多行文本

     $("#"+id).find("textarea").each(function(i){

      $(this).val(json[this.name]?json[this.name]:"");

     });

     //单选框

     var radioNames = "";

     $("#"+id).find("input").filter(":radio").each(function(i){

      radioNames+=radioNames.indexOf(this.name)==-1?this.name+",":"";

     });

     radioNames = radioNames==""?"":radioNames.substring(0, radioNames.length-1);

     var strArr = radioNames.split(",");

     for(var i = 0 ; i < strArr.length;i++){

      var na = strArr[i];

      $("#"+id).find("input").filter(":radio").each(function(m){

       if(this.name==na){

        $(this).attr("checked",this.value==json[na]);

       }

      });

     }

     //复选框

     var checkNames = "";

     $("#"+id).find("input").filter(":checkbox").each(function(i){

      $(this).attr("checked",false);//全不选

      checkNames+=checkNames.indexOf(this.name)==-1?this.name+",":"";

     });

     checkNames = checkNames==""?"":checkNames.substring(0, checkNames.length-1);

     var checkArr = checkNames.split(",");

     for(var i = 0 ; i < checkArr.length;i++){

      var na = checkArr[i];

      if(na!=""){

       $("#"+id).find("input[name='"+na+"']").filter(":checkbox").each(function(m){

        if(this.name==na){

         if(json[na]){

          for(var j = 0; j < json[na].length; j++){

           if(this.value==json[na][j]){

            this.checked=true;

           }

          }

         }

        }

       });

      }

     }

    }

    展开全文
  • 后台定义需要formData格式的数据:即通过表单提交post请求传送的数据 前端用ajax的post请求传送的数据后台无法接收(后台接收的数据对象为空): 错误代码如下: //买卖EMT操作 operateEMTF(operate){ let _this = ...

    个人blog,欢迎关注加收藏

    后台定义需要formData格式的数据:即通过表单提交post请求传送的数据
    
    前端用ajax的post请求传送的数据后台无法接收(后台接收的数据对象为空):
    错误代码如下:
    //买卖EMT操作
    operateEMTF(operate){
    let _this = this;
    let api = "order/place";
    let temp = {
    	type:“buy-limit”,
    	price:0.8763,
    	quantity:1000
    };
    console.log(temp);
    _this.axios.post(api,{
    type:temp.type,
    price:temp.price.toString(),
    quantity:temp.quantity.toString()
    }).then(res=>{
    // console.log(temp,res);
    _this.buy.price = "";
    _this.buy.quantity = "";
    _this.sell.price = "";
    _this.sell.quantity = "";
    });
    },
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    解决方案一:前端解决
    必须把参数temp的json格式转化为formData格式:
    代码如下:
    
    //买卖EMT操作
            operateEMTF(operate){
                let _this = this;
                let api = "order/place";
                let temp = {};
                if(operate=="buy"){
                    temp = _this.buy;
                }else{
                    temp = _this.sell;
                }
                console.log(temp);
    			//1.json格式转化formData格式
                let fd = new FormData();
                Object.keys(temp).forEach(key => fd.append(key, temp[key]))
    
                _this.axios({
                method: 'post',
                url: api,
                data: fd,
    			//2.在请求头中制定参数格式为formData格式
                config: { headers: {'Content-Type': 'multipart/form-data' }}
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (response) {
                    console.log(response);
                });
    
    
    
    			//2.或者简写如下:
    _this.axios.post(api,fd,{
                    headers: {'Content-Type': 'multipart/form-data' }
                }).then(res=>{
                    console.log(res);
                });
    
            },
    
    
    
    
    解决方案二:后台解决
    后台把request.body用json.loads转一下
    
    
    
    展开全文
  • form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 文档 | github 功能...

    介绍

    form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

    文档 | github

    功能

    • 自定义组件

      • 可生成任何Vue组件
      • 自带数据验证
      • 轻松转换为表单组件
    • 通过 JSON 生成表单

    • 通过 Maker 生成表单

    • 强大的API,可快速操作表单

    • 双向数据绑定

    • 事件扩展

    • 局部更新

    • 数据验证

    • 栅格布局

    • 内置组件17种常用表单组件

    对比 1.x

    • 速度更快

    • 体积更小

    • 更强大的全局配置

    • 自定义组件更容易扩展

    • 更容易支持第三方 UI 库

    • 更少的 bug

    示例

    通过 JSON 创建表单
    https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-live3.gif

    通过 API 操作表单
    https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-live2.gif

    @form-create包说明

    名称说明
    @form-create/iviewiview 版表单生成器
    @form-create/element-uielement-ui 版表单生成器
    @form-create/coreform-create 核心包
    @form-create/utilsform-create 工具包
    @form-create/data省市区多级联动数据

    使用

    以element-ui版本为例介绍如何在项目中使用 form-create

    安装

    npm i @form-create/element-ui
    

    挂载

    全局注册

    import formCreate form '@form-create/element-ui';
    
    Vue.use(formCreate);
    

    局部挂载

    import formCreate form '@form-create/element-ui';
    
    export default {
        components:{
            formCreate:formCreaet.$form()
        }
    }
    

    生成表单

    <template>
        <form-create v-model="fApi" :rule="rule" @on-submit="onSubmit"></form-create>
    </template>
    
    export default {
      data () {
        return {
         //表单实例对象 $f
         fApi:{},
         //表单生成规则
         rule:[
           {
              type:'input',
              field:'goods_name',
              title:'商品名称'
            },
            {
              type:'datePicker',
              field:'created_at',
              title:'创建时间'
            }
         ]
        };
      },
      methods:{
          onSubmit(formData){
              //TODO 提交表单
          }
      }
    };
    

    效果

    form-create 效果图

    实例对象 $f

    可以通过 $f 快速操作表单,例如:

    • $f.hidden:隐藏指定组件
    • $f.validate:验证表单
    • $f.setValue:修改表单组件的值
    • $f.append:追加表单组件

    自定义组件

    生成

    通过标签生成

    {
        type:'el-button',
        name: 'btn',
        props:{
        	type:'primary',
        	field:'btn',
        	loading:true
        },
        children:['加载中']
    }
    

    通过模板生成

    {
        type:'template',
        name:'btn'
        template:'<el-button :loading="loading">{{text}}<el-button>',
        vm: new Vue({
          data:{
            loading:true,
            text:'加载中'
          }
        })
    }
    

    转换为表单组件

    自定义组件转换为表单组件后,可通过$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作组件,达到和内置组件相同的效果

    预定义

    props

    在自定义组件内部通过props接收一下属性

    • value 表单的值
    • disabled 组件的禁用状态

    例如:

    vm = Vue({
      props:{
       value:String,
       disabled:Boolean      
      }
    })
    

    input 事件

    通过input事件更新组件内部的值

    当组件值发生变化后,通过 input 事件更新值.例如:

    vm.$emit('input',newValue);
    

    挂载自定义组件

    要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formCreate.component方法挂载

    例如:

    formCreate.component('TestComponent',component);
    

    或者

    Vue.component('TestComponent',component);
    

    生成

    表单组件必须定义field属性

    JSON

    {
        type:'TestComponent',
        value:'test',
        field:'testField',
        title:'自定义组件'
    }
    

    Maker

    formCreate.maker.create('TestComponent','testField','自定义组件').value('test')
    

    示例

    自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同

    formCreate.maker.template('<el-button @click="onClick" long :disabled="disabled">计数器-{{num}}</el-button>', new Vue({
      props:{
        //预定义
        disabled:Boolean,
        value:Number,
      },
      data: function () {
        return {
            num: this.value,
        }
      },
      watch:{
        value(n){
            this.num = n;
        }
      },
      methods: {
        onClick: function () {
            this.num++;
            //更新组件内部的值
            this.$emit('input',this.num);
        },
      },
    }), 'tmp', '自定义 title').value(100).props('disabled',false)
    

    完整示例

    form-create示例.png

    展开全文
  • 在jsp页面表单回填方法 1.靠controller页面跳转,并使用jstl回填. 2.使用ajax方式返回json,再逐个...表单序列化为json方法,很简单只需传表单id,例如$("#from")即可 //序列化表单 function getSearchFormDataJson($fro

    在jsp页面表单回填方法

    1.靠controller页面跳转,并使用jstl回填.

    2.使用ajax方式返回json,再逐个单独回填.

    相对这两种方法都比较麻烦,既然表单能序列化,那能不能用name反序列话呢,答案是可以的.

    表单序列化为json方法,很简单只需传表单id,例如$("#from")即可

    //序列化表单
    function getSearchFormDataJson($from) {
    	var data = $from.serializeObject();
    	return JSON.stringify(data);
    }

    表单反序列化.传递表单id,和json数据串,即可自动回填,checkbox有些毛病.我也是在网上找的!

    //表单自动回填的方法
    var fillForm = function($form, json) {
     var jsonObj = json;
     if (typeof json === 'string') {
      jsonObj = $.parseJSON(json);
     }
     for ( var key in jsonObj) { // 遍历json字符串
      var objtype = jsonObjType(jsonObj[key]); // 获取值类型
      if (objtype === "array") { // 如果是数组,一般都是数据库中多对多关系
       var obj1 = jsonObj[key];
       for ( var arraykey in obj1) {
        // alert(arraykey + jsonObj[arraykey]);
        var arrayobj = obj1[arraykey];
        for ( var smallkey in arrayobj) {
         setCkb(key, arrayobj[smallkey]);
         break;
        }
       }
      } else if (objtype === "object") { // 如果是对象,啥都不错,大多数情况下,会有 xxxId
       // 这样的字段作为外键表的id
    
      } else if (objtype === "string") { // 如果是字符串
       var str = jsonObj[key];
       var date = new Date(str);
       if (date.getDay()) { // 这种判断日期是本人懒,不想写代码了,大家慎用。
        $("[name=" + key + "]", $form).val(str);
        continue;
       }
    
       var tagobjs = $("[name=" + key + "]", $form);
       if ($(tagobjs[0]).attr("type") == "radio") {// 如果是radio控件
        $.each(tagobjs, function(keyobj, value) {
         if ($(value).attr("val") == jsonObj[key]) {
          value.checked = true;
         }
        });
        continue;
       }
       $("[name=" + key + "]", $form).val(jsonObj[key]);
      } else { // 其他的直接赋值
       $("[name=" + key + "]", $form).val(jsonObj[key]);
      }
    
     }
    }
    
    var setCkb = function(name, value) {
     // alert(name + " " + value);
     // $("[name=" + name + "][value=" + value + "]").attr("checked", "checked");
     // 不知为何找不到具体标签;
     $("[name=" + name + "][val=" + value + "]").attr("checked", "checked");
    }
    
    var fillckb = function(name, json) {
     var jsonObj = json;
     if (typeof json === 'string') {
      jsonObj = $.parseJSON(json);
     }
     var str = jsonObj[name];
     if (typeof str === "string") {
      var array = str.split(",");
      $.each(array, function(key, value) {
       setCkb(name, value);
      });
     }
    }
    
    var jsonObjType = function(obj) {
     if (typeof obj === "object") {
      var teststr = JSON.stringify(obj);
      if (teststr[0] == '{' && teststr[teststr.length - 1] == '}')
       return "class";
      if (teststr[0] == '[' && teststr[teststr.length - 1] == ']')
       return "array";
     }
     return typeof obj;
    }
    //表单回填END


    展开全文
  • 基于JSON模式表单生成器 概述 该项目的目的是创建一个简单的Vue组件,该组件能够根据构建HTML表单,并且默认情况下使用语义。 入门 克隆此存储库,安装依赖项并使用dev命令运行。 # Clone this repository git ...
  • JSON表单规范
  • 以完全声明的方式实现具有灵活样式和验证功能的任何Web表单 现场演示: : Stackblitz: ://stackblitz.com/edit/dashjoin 特征 支持JSON Schema Draft 6 可以从URL加载引用的架构 呈现紧凑形式 支持2路数据绑定 ...
  • 本机相似,但具有一些优点:以多维对象的形式获取数据,将数据写入表单(而不仅仅是读取),还读取未检查/禁用的字段,读取文件输入以及其他一些有用的功能。 安装 下载并将dist/form-data-json.min.js到您的...
  • httpclient模拟post请求json封装表单数据的实现方法 httpclient模拟post请求json封装表单数据的实现方法
  • JSON表单规范
  • JSON表单是一个基于React的抽象组件,它可以把JSON数据格式描述的表单转换成项目中的表单,这篇文章主要介绍了JSON生成Form表单的方法示例,感兴趣的小伙伴们可以参考一下
  • 使用json数据生成表单页面
  • 表单格式: 头: 数据类型:Content-Type:...charset=UTF-8(编码格式) 身份令牌:Authentication-Token:123456(不需要可不写) 内容: a=1&...c=3(表单格式用&...json格式: 头: 数据类型:Content-Typ...
  • 和基于JSON表单。 用法 该库导出表单查看器和编辑器。 显示表格 根据和现有数据呈现表单: import { createForm } from '@bpmn-io/form-js' ; const form = createForm ( { schema , data , container : ...
  • 多功能JSON编辑工具,可将JSON对象编辑为直观的类似JSON表单。 npm i / yarn add 现场演示 用法 import JSONForm from "json-as-form" ; < JSONForm xss=removed xss=removed xss=removed> console . log ( ...
  • 利用JSON表单与业务对象双向转换

    千次阅读 2009-06-07 13:21:00
    如果可以将对象的双向转换自动化好了(即可以从对象转化为表单,将表单直接转化为对象)。Javascript中对象是韧性的(flexibility),用代码可以随时修改对象的成员。在客户端用js可以很容易实现字段的绑定。客户端...
  • ngFormio, 用于 angular.js + Form.io的JSON动力表单渲染库 用于 Form.io的angular.js JSON表单渲染器这个库将 Form.io 一起使用,以提供动态JSON表单呈现功能。 这样可以使用 Form.io 提供的模式以下列格式呈现...
  • JSON格式 和 表单数据

    千次阅读 2019-08-29 20:38:09
    今天在调用 手机验证码验证的时候,老是出错; 仔细对比了一下我发送的数据,请求方式,通过body传递的参数,但是本地测试却一直报错,...好了,接下来说一下怎么区分是 JSON数据 还是 表单数据 1. 接口上的不同 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 155,566
精华内容 62,226
关键字:

json与表单