技术标签: 学习 javaweb json javascript 开发语言
json 可以定义多种类型
var jsonObj = { "key1":123, "key2":"name", "key3":[12,"age",true], //数组 "key4":false, "key5":{ //存一个json对象 "key6":456, "key7":"number" } }
json其实就是一个Object对象, 他的key值 可以看成对象的一个属性, 获取他的value值可以通过 对象名.key来获取 比如上面的jsonObj.key1,jsonObj.key2 访问其中的数组 jsonObj.key3 得到的是【12,age,true】 我们可以通过for循环遍历数组
for (var i = 0; i <jsonObj.key3.length ; i++) { alert(jsonObj.key3[i]) }
访问jason中key中的对象
alert(jsonObj.key5.key6);//得到的对象的里面的属性 alert(jsonObj.key3) // 得到是一个对象 alert(jsonObj.key5.key7);
json的存在有两种形式
一种是: 对象的形式存在,我们叫他json对象
一种是: 字符串的形式存在,我们叫他json字符串
一般我们要操作json 中的数据的时候,需要json对象的格式
var jsonObject = JSON.parse(jsonString); alert(jsonObject);
一般我们要在客户都但和服务器之间进行数据交换的时候,需要json字符串
//将json对象装换成字符串 var jsonString = JSON.stringify(jsonObj); alert(jsonString);
将List集合装变成json
Gson gson = new Gson(); //创建一个List集合Person泛型, 将list集合转换成json List<Person> person2 = new ArrayList<Person>(); person2.add(new Person("zhangsan",22)); person2.add(new Person("wangwu",21)); person2.add(new Person("zhaosi",20)); //, 将list集合转换成json String s1 = gson.toJson(person2); System.out.println(s1);
将json转换成List集合:第一步先创建一个类PersonList去继承TypeToken 泛型是你要转换成的那个集合的类型
public class PersonList extends TypeToken<List<Person>> { }
之后调用fromjson方法,第一个参数是json字符串,第二个参数:创建新建的那个类并且调用getType方法
//将json装换成list集合 List<Person> o = gson.fromJson(s1, new PersonList().getType()); System.out.println(o); //取出集合中的第一个元素 Person person = o.get(0); System.out.println(person);
将map集合转换成json字符串
//将map集合转变成json字符串 Map<Integer,Person> person = new HashMap<>(); //加入元素 person.put(2,new Person("蔡徐坤",5)); person.put(3,new Person("华晨宇",6)); Gson gson = new Gson(); String s = gson.toJson(person); System.out.println(s);
将json转换成Map集合(跟List集合一样,需要创建一个新的类去继承TypeToken)
//将json字符串转换成map集合 Map<Integer,Person> person2= gson.fromJson(s, new PersonMap().getType()); //取出key为2的元素 Person person1 = person2.get(2); System.out.println(person1); }
不创建一个类去继承TyoeToken如何实现呢?
采用匿名内部类,这样就不需要去创建一个新的类
//将json字符串转换成map集合 // Map<Integer,Person> person2= gson.fromJson(s, new PersonMap().getType()); //采用匿名内部类 Map<Integer,Person> person2= Map<Integer,Person> person2= gson.fromJson(s,new TypeToken<HashMap<Integer,Person>>(){}.getType()); //取出key为2的元素 Person person1 = person2.get(2); System.out.println(person1);
ajax是一种局部跟新,叶部请求技术
function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 xmlHttpRequest.open("GET","http://localhost:8080/json/ajaxServlet?action=javaScriptAjax",true); // 4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。 xmlHttpRequest.onreadystatechange = function (){ //必须西安经行判断,是否已经得到响应 if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ //将得到的json字符串转换成对象 var jsonObj = JSON.parse(xmlHttpRequest.responseText); //将对象输出在页面上 document.getElementById("div01").innerHTML ="姓名" + jsonObj.name+",编号" +jsonObj.id; } } // 3、调用send方法发送请求 xmlHttpRequest.send(); }
上面代码中的 xmlHttpRequest.open("GET","http://localhost:8080/json/ajaxServlet?action=javaScriptAjax",true)true表示异步, 比如我 xmlHttpRequest.send();下面再写一个alert(我是最后一行代码),在第四步写 alert("我执行了”), 如果 我先给false(同步),那么程序先经过步骤1然后是2,然后是3send方法,但是不会立刻执行下面的(我是最后一行代码,而是等到第四部)一起执行, 但是如果是异步呢, 会立刻执行(我是最后一行代码)
function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 xmlHttpRequest.open("GET","http://localhost:8080/json/ajaxServlet?action=javaScriptAjax",true); // 4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。 xmlHttpRequest.onreadystatechange = function (){ alert("我执行了”) //必须西安经行判断,是否已经得到响应 if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ //将得到的json字符串转换成对象 var jsonObj = JSON.parse(xmlHttpRequest.responseText); //将对象输出在页面上 document.getElementById("div01").innerHTML ="姓名" + jsonObj.name+",编号" +jsonObj.id; } } // 3、调用send方法发送请求 xmlHttpRequest.send(); alert("我是最后一行代码) }
同步不好,让用户吐血
ajax方法
url: 表示请求的地址
type: 表示请求的类型GEt或POST类型
data: 表示发送给服务器的数据
success: 请求成功,响应的回调函数
dataType 响应数据类型
常用的数据类型有text 表示纯文本
xml 表示xml数据
json 表示json 对象
$(function(){ // ajax请求 $("#ajaxBtn").click(function(){ $.ajax({ url:"http://localhost:8080/json/ajaxServlet", type:"GET", data:"action=jQueryScriptAjax", success:function (data){ $("#msg").html("姓名:" + data.name+",编号 "+ data.id); }, dataType:"json", }) /* alert("ajax btn");*/ });
使用$.get() 和$.post()的方法 就不需要 在加type属性
// ajax--get请求 $("#getBtn").click(function(){ $.get( "http://localhost:8080/json/ajaxServlet", "action=jQueryScriptAjaxGet", function (data){ $("#msg").html("编号:"+ data.name+",编号 :"+data.id); }, "json", ) }); // ajax--post请求 $("#postBtn").click(function(){ // post请求 $.post( "http://localhost:8080/json/ajaxServlet", "action=jQueryScriptAjaxPost", function (data){ $("#msg").html("姓名:"+data.name+", 编号:"+data.id) }, "json", ) });
使用getJSON方法 type和 datatype 都不用写了,默认get和json
// ajax--getJson请求 $("#getJSONBtn").click(function(){ // 调用 $.getJSON("http://localhost:8080/json/ajaxServlet", "action=jQueryScriptAjaxGetJson", function (data){ $("#msg").html(" 姓名 :"+data.name+",编号:"+data.id); }) });
使用 $("#form01").serialize(), 来获取表单中所有的数据,并且发送到数据库("#form01")是表单id
// ajax请求 $("#submit").click(function(){ // 把参数序列化 //将表单中,所有获取的数据拼接成name=value&name=value这形式,并且发送给服务器 $.getJSON( "http://localhost:8080/json/ajaxServlet", "action=jQueryScriptAjaxGetJson&"+ $("#form01").serialize(), function (data){ $("#msg").html(" 姓名 :"+data.name+",编号:"+data.id); }, ) });
Servlet 接收数据
protected void jQueryScriptAjaxGetJson(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("jQueryScriptAjaxGetJson成功得到请求"); System.out.println("username="+req.getParameter("username")); System.out.println("password="+req.getParameter("password"));
成功获取到用户输入的username和password
第一步在UserServlet文件中写一个方法来获取,并且判断用户名,在发送给客户端json字符串
private Service service = new ServiceImpl(); public void jQueryScriptAjaxGetJson(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取客户端输入的username String username = req.getParameter("username"); boolean existUsername = service.exitusername(username); //existUsername, Map<String,Object> resultMap = new HashMap<>(); resultMap.put("existUsername",existUsername); //用json方法将map集合转换成json字符串 并且发送给客户端 Gson gson = new Gson(); String json = gson.toJson(resultMap); //并且发送给客户端 resp.getWriter().write(json); }
第二部在注册的jsp文件中,拿到客户端发来的json字符串,利用$getJSON的方法来提示
// 页面加载完成之后 $(function () { //用户框的id值 username $("#username").blur(function (){ //得到用户输入的username值 var username = this.value; $.getJSON( "http://localhost:8080/bookstore_student/UserServlet", "action=jQueryScriptAjaxGetJson&username="+username, function (data){ if (data.existUsername){ $("span.errorMsg").text("用户名已存在!"); }else{ $("span.errorMsg").text("用户名可用!"); } } ) })
文章浏览阅读4.3k次,点赞4次,收藏62次。微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo:文章列表demo 微商城(含微信小程序)完整源码+配置指南 微信小程序Demo:一个简单的工作系统 微信小程序Demo:用于聚会的小程序 微信小程序Demo:Growth 是一款..._微信小程序switch页面demo
文章浏览阅读2.2k次。2.1除了#include<iostream>之外的头文件#include <Eigen/Core>//Core:核心#include <Eigen/Dense>//求矩阵的逆、特征值、行列式等#include <Eigen/Geometry>//Eigen的几何模块,可以利用矩阵完成如旋转、平移/***其他***/#include <ctime>//可用于计时,比较哪个程序更快#include <cmath>//包含a_eigen.determinant
文章浏览阅读1w次,点赞12次,收藏61次。(1)理论部分x 水平方向的梯度, 其实也就是右边 - 左边,有的权重为1,有的为2 。若是计算出来的值很大 说明是一个边界 。y 竖直方向的梯度,其实也就是下面减上面,权重1,或2 。若是计算出来的值很大 说明是一个边界 。图像的梯度为:有时简化为:即:(2)程序部分函数:Sobelddepth 通常取 -1,但是会导致结果溢出,检测不出边缘,故使..._sobel算子
文章浏览阅读3.6k次,点赞17次,收藏8次。cuda10.1和cudnn7.6.5百度网盘下载链接(Linux版)在官网下载不仅慢,,,主要是还总失败。。终于下载成功了,这里给出百度网盘下载链接,希望可以帮到别人百度网盘下载链接提取码: vyg5_cudnn7.6网盘下载
文章浏览阅读9.3w次,点赞69次,收藏427次。定义:正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式,该模式描述在搜索文本时要匹配的一个或多个字符串。上面都是官方的说明,我自己的理解是(仅供参考):通过事先规定好一些特殊字符的匹配规则,然后利用这些字符进行组合来匹配各种复杂的字符串场景。比如现在的爬虫和数据分析,字符串校验等等都需要用_python正则表达式
文章浏览阅读973次。条件渲染就是在指定的条件下,渲染出指定的UI。比如当我们显示主页的时候,应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中,这种UI元素的显示和隐藏可以通过两个关键字,`v-if` 和`v-show`来实现。但是虽然实现的功能一样,但他们两者有着一些细微的区别。总结起来这个区别就是:v-show控制UI元素隐藏时只是将UI的显示状态变成了不可见,实际上这个UI是存在的,但是v-if隐藏UI元素时则是直接干掉了这个UI元素,使其不显示_条件渲染的基本概念
文章浏览阅读1.9w次,点赞27次,收藏122次。安装Anaconda,Python,pycharm我另一篇文章里面有介绍https://blog.csdn.net/wwb1990/article/details/103883775安装NILMTK有了上面的环境,接下来进入正题。NILMTK官网:http://nilmtk.github.io/因为官方安装流程是基于linux的(官方安装流程),我这里提供windows..._nilmtk学习
文章浏览阅读826次,点赞20次,收藏28次。如果实际 Pod 数量比指定的多那就结束掉多余的,如果实际数量比指定的少就新启动一些Pod,当 Pod 失败、被删除或者挂掉后,RC 都会去自动创建新的 Pod 来保证副本数量,所以即使只有一个 Pod,我们也应该使用 RC 来管理我们的 Pod。label 与 selector 配合,可以实现对象的“关联”,“Pod 控制器” 与 Pod 是相关联的 —— “Pod 控制器”依赖于 Pod,可以给 Pod 设置 label,然后给“控制器”设置对应的 selector,这就实现了对象的关联。
文章浏览阅读57次。1. ultraEdit设置禁止自动更新: 菜单栏:高级->配置->应用程序布局->其他 取消勾选“自动检查更新”2.xshell 传输文件中设置编码,防止乱码: 文件 -- 属性 -- 选项 -- 连接 -- 使用UTF-8编码3.乱码修改:修改tomcat下配置中,修改: <Connector connectionTimeou..._高级-配置-应用程序布局
文章浏览阅读1.2k次。打开下面的网站后,挑选要使用的,https://icomoon.io/app/#/select/image下载后 解压 ,先把fonts里面的文件复制到项目fonts文件夹中去,然后打开其中的style.css文件找到类似下面的代码@font-face {font-family: ‘icomoon’;src: url(’…/fonts/icomoon.eot?r069d6’);s..._arco的ico怎么导入
文章浏览阅读1.9k次。Microsoft Visual Studio 2010(VS2010)正式版 CDKEY / SN:YCFHQ-9DWCY-DKV88-T2TMH-G7BHP企业版、旗舰版都适用推荐直接下载电驴资源的vs旗舰版然后安装,好用方便且省时!) MSDN VS2010 Ultimate 简体中文正式旗舰版破解版下载(附序列号) visual studio 2010正_visual_studio_2010_professional key
文章浏览阅读3.2k次,点赞2次,收藏17次。导读:互联网医疗是指综合利用大数据、云计算等信息技术使得传统医疗产业与互联网、物联网、人工智能等技术应用紧密集合,形成诊前咨询、诊中诊疗、诊后康复保健、慢性病管理、健康预防等大健康生态深度..._线上医疗的定义