JavaWeb14(ajax02判断账号是否存在&JSON介绍&AJAX+JSON字符串和对象之间的转换&JSON实现自动补全)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JavaWeb14(ajax02判断账号是否存在&JSON介绍&AJAX+JSON字符串和对象之间的转换&JSON实现自动补全)

一.AJAX实现即时检查用户名是否存在

1.1 效果预览

1.2 代码实现

①html代码

 

ajax请求

 

 

③底层代码


2.JSON概述.

2.1何为JSON.

  • JSONJavaScript Object Notation (js对象标记) ,是一种轻量级的数据交换格式,是一个序列化的对象数组,易于人阅读和编写,同时也易于机器解析和生成 。

2.2为什么需要JSON.

  • 服务器响应给浏览器的数据应该是字符串类型 ,但是如果数据量比较大,我们就需要在服务器端将数据拼接成一个良好格式的字符串数据,响应给浏览器,浏览器根据格式再进行数据的解析和使用。而json格式的字符串就是一种良好的格式, 它能在 JavaScript 对象和字符串之间得以快速转换 。

2.3JSON格式介绍.

2.3.1JSON对象格式.

  • 格式:{"key":value,"key":value}
  • 格式解释:
  1. 对象用花括号包裹;
  2. 对象的内容是一组组键值对:key/value
  3. 键必须是字符串类型(加双引号),值可以是Java任意类型;
  4. 键值之间用末梢隔开,每对键值对之间用分号隔开。
  • 如:{ "uname":"王琳凯", "age":20, "info":"泰裤辣椒!" }。

2.3.2JSON数组格式.

  • 格式:[元素1,元素2,元素3,元素4,元素5];
  • 格式解释:
  1. 数组用中括号包裹;
  2. 数组的内容是任意类型的元素,元素之间用逗号隔开。
  • 如:[1,2,3,4,5,6,7,8,9,10].

2.3.3JSON对象数组格式.

  • 格式:[{"name":"张三","age":28},{"name":"李四","age":38},{"name":"王五","age":48}]
  • 格式解释:中括号里面包N哥裹花括号,每个花括号就是一个对象,花括号之间用逗号隔开。

3.JSON字符串的解析.

3.1前台解析后台传来的JSON字符串.

3.1.1后台处理.

  • 后台把 Java对象或者集合解析成 JSON字符串,并传到前台;
  • 需要通过第三方 jar包:fastjson 或者 jackson,课程使用 fastjson


3.1.2前端解析.

  • 前端接收后台返回的 json字符串,并解析成 js里面的对象或者数组;
  • 方式一:手动解析(不推荐):

  • 手动解析还有一种是:eval() 方法;
  • 方式二:自动解析(推荐):


3.2后台解析前台传来的JSON字符串.

3.2.1解析JSON数组情况.

  • 前端.

  • 后台:


3.2.2解析JSON对象情况.

  • 前端:

  • 后台:


4.AJAX+JSON实现自动补全.

4.1前端.

4.1.1HTML布局.


4.1.2js代码.


4.2后台.

相关文章
|
3月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
2月前
|
XML JSON 前端开发
json字符串CSS格式化
完成以上步骤后,你便能在网页中看到格式化后的JSON数据,它们将按照CSS定义的样式进行展示,使数据更易于阅读和理解。通过有效地结合JSON和CSS,你可以创建出更加丰富且易于交互的网页内容。
189 64
|
1月前
|
JSON 前端开发 JavaScript
json字符串如何转为list对象?
json字符串如何转为list对象?
193 7
|
2月前
|
XML JSON 前端开发
json字符串CSS格式化
json字符串CSS格式化
57 4
|
2月前
|
JSON 前端开发 JavaScript
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例,Axios + JSON 品牌列表查询和添加
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
|
2月前
|
JSON 数据格式 Python
6-1|Python如何将json转化为字符串写到文件内 还保留json格式
6-1|Python如何将json转化为字符串写到文件内 还保留json格式
|
3月前
|
JSON Java 数据格式
Java系列之:生成JSON字符串
这篇文章介绍了两种在Java中生成JSON字符串的方法:使用`JSONObject`类及其`toJSONString`方法来动态生成,以及手动拼接字符串的方式来创建JSON格式的字符串。
Java系列之:生成JSON字符串
|
3月前
|
JSON Go 数据格式
Go实现json字符串与各类struct相互转换
文章通过Go语言示例代码详细演示了如何实现JSON字符串与各类struct之间的相互转换,包括结构体对象生成JSON字符串和JSON字符串映射到struct对象的过程。
30 0
|
3月前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
37 0
|
4月前
|
存储 JSON Java
Java对象转换为JSON字符串
在Java开发中,常需将数据对象转换为JSON存储,如使用Fastjson库。要将Java对象转为JSON,可调用`JSON.toJSONString(obj)`;反向转换则用`JSON.parseObject(str, Class)`。