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. hibernate 异常:could not execute statement

    错误信息: JDBC exception on Hibernate data access: SQLException for SQL [n/a]; SQL state [72000]; error ...

  2. http详解

    mac地址是网卡出厂的时候给定的固定地址.ip是当前节点被分配的地址,mac和ip相互配对: ip间通信- http本身是无状态无连接的,因为有这样的特性才能让他适用于当今这么复杂的网络环境. 但是有 ...

  3. 百度地图api

    引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak ...

  4. python学习道路(day7note)(subprocess模块，面向对象)

    1.subprocess模块   因为方法较多我就写在code里面了,后面有注释 #!/usr/bin/env python #_*_coding:utf-8_*_ #linux 上调用python脚 ...

  5. 几何服务，cut功能，输入要素target(修改后)内容。

    几何服务,cut功能测试,输入要素target(修改后)内容. {"displayFieldName":"","fieldAliases": ...

  6. window系统下，简单的FTP上传和下载操作

    先假设有一FTP服务器,FTP服务器:qint.ithot.net,用户名:username   密码:user1234.在本地电脑D:盘创建一个文件夹"qint".将要上传的文件 ...

  7. rabbitmq之消息重入队列

    说起消息重入队列还得从队列注册消费者说起,客户端在向队列注册消费者之后,创建的channel也会被主队列进程monitor,当channel挂掉后,主队列进程(rabbit_amqqueue_proc ...

  8. FireDAC 连接SQL Server一些要注意的地方

    TFDConnection: FetchOptions.Mode 设置为fmAll, 返回全部结果, 否则默认只返回前50条, 效果与open以后再执行FetchAll一样 Specifies how ...

  9. centos7 mariadb

    闲置已久的空间环境配置忘得差不多了,今天得空整理,重置了磁盘重新搭建环境,首先在CentOS 7.0安装MariaDB的数据库,在这里记录下安装过程,以便以后查看. 1.安装MariaDB 安装命令 ...

  10. Apache 配置多端口

    Apache 配置多端口,主要是以下步骤 1. 如果电脑是64位的,官网上下载WampServe,装的过程中如果出现msvcp110.dll丢失的话,解决办法如下: 1.1 首先是打开浏览器,在浏览器 ...