jQuery对json快速赋值，重点在于将input的id取跟JSON同样的名称。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery对json快速赋值</title>

    <!--引用jQuery库-->

    <script src="js/jquery-1.11.3.min.js"></script>

</head>

<body>

<div>

    姓名:<input type="text" id="name">

    出生日期:<input type="date" id="birthday">

    其他:<input type="text" id="other">

</div>

<div>

    性别:<input type="hidden" id="sex">

    <input type="radio" name="user_sex" value="男">男

    <input type="radio" name="user_sex" value="女">女

</div>

<button id="btn">按钮</button>

<script>

    $(function () {

        $('#btn').on('click',function(){

            json_assignment();

        });

        radio_event();

        //性别单选值赋给input

        function radio_event(){

            //checkbox或select都可以用同样的方法

            $('input[name="user_sex"]').on('change', function () {

                var tt=$('#sex');

                tt.val($("input[name='user_sex']:checked").val())

            })

        }

        function json_assignment(){

            var con={name:'',birthday:'',other:'',sex:''};

            var parse={name:'姓名',birthday:'出生日期',sex:'性别'};

            for(var ii in con){

                con[ii]=$('#'+ii).val();

                if(con[ii]==''){

                    if(ii in parse){

                        alert(parse[ii]+'不能为空');

                        return;

                    }

                }

            }

            //控制台输出

            console.log(con);

        }

    });

</script>

</body>

</html>

第一篇博客，希望跟大家好好交流。

jQuery对json快速赋值的更多相关文章

  1. ObjC 巧用反射和KVC实现JSON快速反序列化成对象

    1.简单的KVC介绍 KVC是一种间接访问对象属性的机制,不直接调用getter 和 setter方法,而使用valueForKey 来替代getter 方法,setValue:forKey来代替se ...

  2. [转] jQuery 操作 JSON 数据

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

  3. jquery下json数组的操作用法实例

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

  4. 用jquery解析JSON数据的方法以及字符串转换成json的3种方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...

  5. [转]jquery 对 Json 的各种遍历

    原文地址:http://caibaojian.com/jquery-each-json.html 概述 JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采 ...

  6. 字典的快速赋值 setValuesForKeysWithDictionary

    字典的快速赋值 setValuesForKeysWithDictionary ​ 前言 在学习解析数据的时候,我们经常是这么写的:PersonModel.h文件中    @property (nona ...

  7. jQuery.parseJSON(json) 使用方法

    jQuery.parseJSON(json) 接受一个JSON字符串,返回解析后的对象. 返回值:String传入一个畸形的JSON字符串会抛出一个异常.比如下面的都是畸形的JSON字符串:{test ...

  8. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  9. [Javascript,JSON] JQuery处理json与ajax返回JSON实例

    转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...

随机推荐

  1. xcode8插件无法使用

    一,xcode8无法使用插件的问题 创建新的XcodeSigner代码证书,并执行"sudo codesign -f -s XcodeSigner /Applications/Xcode.a ...

  2. <五>JDBC_利用反射及JDBC元数据编写通用的查询方法

    此类针对javaBean类写了一个通用的查询方法,List<javaBean> 通用查询更新中...:通过学习,深刻体会到学会反射就等于掌握了java基础的半壁江山! 一.使用JDBC驱动 ...

  3. 如何用最简单的方法将PCweb改成适合各种设备的web

    使web页面自适应设备大小 1)用一个<div>包围<body>的内容 2)该div属性的宽度设为100%   (宽度设为100%后,页面会随着设备窗口大小自动改变) 3)高度 ...

  4. EF Code First之困扰

    Code First自动更新数据库有几种方法 Code First什么都不做 Database.SetInitializer<ShopContext>(null); 发布网站的话一般要在A ...

  5. WPF整理-为控件添加自定义附加属性

    附加属性 附加属性,大家都不陌生,最常见的是Canvas.Left/Canvas.Top,类似的也有Grid.Row/Grid.Column等附加属性.举个最常见的例子 <Canvas> ...

  6. 第八周PSP

    团队项目PSP 一:表格     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论用户界面 8:40 11:40 35 60 70 分析与 ...

  7. IE浏览器测试

    http://www.iefans.net/ http://ie8.00791.com/ https://www.browserstack.com/http://browserhacks.com/

  8. rabbitmq method之queue.declare

    queue.declare即申请队列,首先对队列名作处理,若未指定队列名则随机生成一个,然后查询数据库队列是否已经创建,若创建完成则会申请队列返回 handle_method(#'queue.decl ...

  9. java常见面试题及答案 11-20（JVM篇）

    11.JVM内存分哪几个区,每个区的作用是什么? Java虚拟机主要分为以下一个区: 方法区:1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区 ...

  10. cloudera learning5:Hadoop集群高级配置

    HDFS-NameNode Tuning: dfs.namenode.handler.count: NameNode可开启的thread number,thread为从NameNode到DataNod ...