jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實例代碼

更新時間：2019年10月11日 09:17:00 作者：過客璇璇

這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

1.基礎(chǔ)——定義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" }
 ]
}

目錄如下：

2.ajax請求json jquery轉(zhuǎn)換為數(shù)據(jù)字典

我們通過ajax請求該json文件的數(shù)據(jù) 將其轉(zhuǎn)換為字典

//-----基礎(chǔ)信息start
//用戶信息字典
var userinfoDic = {};
$.ajax({
 //請求方式為get
 type:"GET",
 //json文件位置
 url:"./json/user.json",
 //返回數(shù)據(jù)格式為json
 dataType: "json",
 //請求成功完成后要執(zhí)行的方法
 success: function(data){
 //使用$.each方法遍歷返回的數(shù)據(jù)date
 $.each(data.userinfo,function(i,item){
 //設(shè)置根據(jù)用戶賬號密碼找用戶
 userinfoDic[item.account,item.password] = item;
 });
 }
});
//-----基礎(chǔ)信息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.測試截圖

總結(jié)

以上所述是小編給大家介紹的jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

鼠標(biāo)經(jīng)過出現(xiàn)氣泡框的簡單實例
下面小編就為大家?guī)硪黄髽?biāo)經(jīng)過出現(xiàn)氣泡框的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
jQuery each函數(shù)源碼分析
jquery each函數(shù)的使用頻率非常高，下面給大家介紹jQuery each函數(shù)源碼分析，一起看看吧
2016-05-05
a標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實現(xiàn)方法
下面小編就為大家?guī)硪黄猘標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
JQuery事件委托(適用于給動態(tài)生成的腳本元素添加事件)
jq寫了點擊事件，是通過獲取元素的類名被點擊后執(zhí)行對應(yīng)方法，但是研發(fā)套完模板，他會把所有的結(jié)構(gòu)先清空，導(dǎo)致jq根本找不到那個元素，所以事件就不得執(zhí)行了,需要的朋友可以參考下
2020-02-02
jquery.validate的使用說明介紹
本文是對jquery.validate的使用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
精心收集的jQuery常用的插件1000
花N長時間積累的Jquery插件，希望大家喜歡。大家還有什么新的插件，請留言，我們一并收錄。感謝大家的支持。
2011-05-05
詳解jQuery-each()方法
這篇文章主要介紹了jQuery-each()方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
分析了一下JQuery中的extend方法實現(xiàn)原理
這篇文章主要介紹了通過jQuery.extend的源碼分析了一下JQuery中的extend方法實現(xiàn)原理以及使用方式，非常的詳細(xì)，這里推薦給大家，有需要的小伙伴來參考下吧。
2015-02-02
IE6下opacity與JQuery的奇妙結(jié)合
在群里看見有人貼出一個頁面問opacity不支持IE6，有什么好的支持方法沒。貼出第一眼就發(fā)現(xiàn)用了jq庫，當(dāng)場就想到了支持的。但很多人回答用CSS濾鏡，當(dāng)我看到這個答案的時候。有些很吃驚。難道大家都不知道JQ是支持opacity兼容IE6+的嗎？開始他們都不相信。JQ怎么配合使用。于是就寫了一個簡單的代碼給他們。
2013-03-03
JQuery基于FormData異步提交數(shù)據(jù)文件
這篇文章主要介紹了JQuery基于FormData異步提交數(shù)據(jù)文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-09-09