jquery将json转为数据字典的实例代码


Posted in jQuery onOctober 11, 2019

1.基础——定义json文件

{
 "userinfo": [
 { "account":"15639864589" , "password":"123456789" , "email":"123456789@qq.com" },
 { "account":"15652689689" , "password":"123456789" , "email":"123456789@qq.com" },
 { "account":"15635456989" , "password":"123456789" , "email":"123456789@qq.com" },
 { "account":"15632145689" , "password":"123456789" , "email":"123456789@qq.com" }
 ]
}

目录如下:

jquery将json转为数据字典的实例代码

2.ajax请求json jquery转换为数据字典

我们通过ajax请求该json文件的数据  将其转换为字典

//-----基础信息start
//用户信息字典
var userinfoDic = {};
$.ajax({
 //请求方式为get
 type:"GET",
 //json文件位置
 url:"./json/user.json",
 //返回数据格式为json
 dataType: "json",
 //请求成功完成后要执行的方法
 success: function(data){
 //使用$.each方法遍历返回的数据date
 $.each(data.userinfo,function(i,item){
 //设置根据用户账号密码找用户
 userinfoDic[item.account,item.password] = item;
 });
 }
});
//-----基础信息end

3.字典测试

//登录按钮的点击事件
$("#login").bind('click',function(){
 var account = $("#account").val();
 var password = $("#password").val();
 //
 if(account != '' && password != ''){
  if(userinfoDic[account,password]){
  window.location.href = 'index.html';
  }else{
  alert("账号或密码错误!");
  }
 }else{
 alert("账号或密码不能为空!");
 }
  
});

4.测试截图

jquery将json转为数据字典的实例代码

总结

以上所述是小编给大家介绍的jquery将json转为数据字典的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 #jQuery
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
js 动态选中下拉框
2009/11/26 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
在python里面运用多继承方法详解
2019/07/01 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python如何构建mock接口服务
2021/01/28 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
IBatis持久层技术
2016/07/18 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
保护黄河倡议书
2014/05/16 职场文书
个人党性分析材料
2014/12/19 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers