JavaWeb--快速入门JSON&Ajax

var jsonObj2 = JSON.parse(jsonObjString);

alert(jsonObj2.key1);// 12

alert(jsonObj2.key2);// abc

1.4 JSON在java中的使用


​ 我们要使用json和java中使用,我们需要使用到一个第三方的包。它就是gson.jar

​ Gson是 Google 提供的用来在Java对象和JSON 数据之间进行映射的Java类库。可以将一个JSON 字符串转成一个Java 对象,或者反过来。

json 在 java 中的操作。常见的有三种情况。

1、java 对象和 json 的转换

2、java 对象 list 集合和 json 的转换

3、map 对象和 json 的转换

package com.atguigu.json;

import com.atguigu.pojo.Person;

import com.google.gson.Gson;

import com.google.gson.reflect.TypeToken;

import org.testng.annotations.Test;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

public class JsonTest {

// 1.2.1、javaBean和json的互转

@Test

public void test1(){

Person person = new Person(1,“pyy好帅!”);

// 创建Gson对象实例

Gson gson = new Gson();

// toJson方法可以把java对象转换成为json字符串

String personJsonString = gson.toJson(person);

System.out.println(personJsonString);

// fromJson把json字符串转换回Java对象

// 第一个参数是json字符串

// 第二个参数是转换回去的Java对象类型

Person person1 = gson.fromJson(personJsonString, Person.class);

System.out.println(person1);

}

// 1.2.2、List 和json的互转

@Test

public void test2() {

List personList = new ArrayList<>();

personList.add(new Person(1, “lbj”));

personList.add(new Person(2, “curry”));

Gson gson = new Gson();

// 把List转换为json字符串

String personListJsonString = gson.toJson(personList);

System.out.println(personListJsonString);

List list = gson.fromJson(personListJsonString, new PersonListType().getType());

System.out.println(list);

Person person = list.get(0);

System.out.println(person);

}

// 1.2.3、map 和json的互转

@Test

public void test3(){

Map<Integer,Person> personMap = new HashMap<>();

personMap.put(1, new Person(1, “kb”));

personMap.put(2, new Person(2, “mady”));

Gson gson = new Gson();

// 把 map 集合转换成为 json字符串

String personMapJsonString = gson.toJson(personMap);

System.out.println(personMapJsonString);

// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType());

Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());

System.out.println(personMap2);

Person p = personMap2.get(1);

System.out.println§;

}

}

二、Ajax

=====================================================================

2.1 什么是Ajax?


AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

ajax是一种浏览器异步发起请求。局部更新页面的技术。

什么是异步?

所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果我们可以再来处理这个事。(当然,在其他语境下这个解释可能就不对了)

这个很重要,如果不是这样的话,我们点完按钮,页面就会死在那里,其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。

(虽然提供异步通讯功能的组件默认情况下都是异步的,但它们也提供了同步选项,如果你好奇把那个选项改为false的话,你的页面就会死在那里)

通俗的理解

如你刚开始学习网页制做,一个页面一个页面的转跳,开新窗口,输入,关闭,原窗口要手动或自动的刷新。相比现在流行的网页很low是不是。

现在我写个回答,发布,页面不用完全刷新,直接加在页面下方,是不是感觉体验好了些?

ajax,异步javascript和xml,就是不关闭不转跳不刷新的情况下,在网页后台提交数据,部分更新页面内容,将网页的用户体验提升到接近原生程序的地步。

原生的Ajax请求

​ 1、我们首先要创建XMLHttpRequest 对象

​ 2、调用open方法设置请求参数

​ 3、调用send方法发送请求

​ 4、在send方法前绑定onreadystatechange 事件,处理请求完成后的操作。

创建一个html页面,发起请求
Insert title here

ajax request

ajax request

ajax request

ajax request

ajax request

1.1 1.2 2.1 2.2
创建一个AjaxServlet程序接受请求

package com.atguigu.servlet;

import com.atguigu.pojo.Person;

import com.google.gson.Gson;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

public class AjaxServlet extends BaseServlet {

protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

System.out.println(“Ajax请求过来了”);

Person person = new Person(1, “curry”);

try {

Thread.sleep(3000);

} catch (InterruptedException e) {

e.printStackTrace();

}

// json格式的字符串

Gson gson = new Gson();

String personJsonString = gson.toJson(person);

resp.getWriter().write(personJsonString);

}

protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

System.out.println(" jQueryAjax == 方法调用了");

Person person = new Person(1, “curry”);

// json格式的字符串

Gson gson = new Gson();

String personJsonString = gson.toJson(person);

resp.getWriter().write(personJsonString);

}

protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

System.out.println(" jQueryGet == 方法调用了");

Person person = new Person(1, “curry”);

// json格式的字符串

Gson gson = new Gson();

String personJsonString = gson.toJson(person);

resp.getWriter().write(personJsonString);

}

protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

System.out.println(" jQueryPost == 方法调用了");

Person person = new Person(1, “curry”);

// json格式的字符串

Gson gson = new Gson();

String personJsonString = gson.toJson(person);

resp.getWriter().write(personJsonString);

}

protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

System.out.println(" jQueryGetJSON == 方法调用了");

Person person = new Person(1, “curry”);

// json格式的字符串

Gson gson = new Gson();

String personJsonString = gson.toJson(person);

resp.getWriter().write(personJsonString);

}

protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

System.out.println(" jQuerySerialize == 方法调用了");

System.out.println(“用户名:” + req.getParameter(“username”));

System.out.println(“密码:” + req.getParameter(“password”));

Person person = new Person(1, “curry”);

// json格式的字符串

Gson gson = new Gson();

String personJsonString = gson.toJson(person);

resp.getWriter().write(personJsonString);

}

}

2.3 JQuery的Ajax请求


编写原生的JavaScript要写很多的代码。所以使用起来非常的不方便,我们一般会使用JavaScript 的框架来解决这个问题比如Jquery框架

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

一个表单序列化方法: serialize()表单序列化方法

如何使用上面的几个方法?

JQuery中和 Ajax请求有关的方法有四个;

$.ajax请求参数

url: 请求的地址

type : 请求的方式 get或 post

data : 请求的参数 string 或json

success: 成功的回调函数

最后

作为过来人,小编是整理了很多进阶架构视频资料、面试文档以及PDF的学习资料,针对上面一套系统大纲小编也有对应的相关进阶架构视频资料



编写原生的JavaScript要写很多的代码。所以使用起来非常的不方便,我们一般会使用JavaScript 的框架来解决这个问题比如Jquery框架

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

一个表单序列化方法: serialize()表单序列化方法

如何使用上面的几个方法?

JQuery中和 Ajax请求有关的方法有四个;

$.ajax请求参数

url: 请求的地址

type : 请求的方式 get或 post

data : 请求的参数 string 或json

success: 成功的回调函数

最后

作为过来人,小编是整理了很多进阶架构视频资料、面试文档以及PDF的学习资料,针对上面一套系统大纲小编也有对应的相关进阶架构视频资料

[外链图片转存中…(img-ie81879G-1721137262427)]
[外链图片转存中…(img-w62JdVZp-1721137262428)]

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现省市区三级联动的关键是建立好数据库,并且编写好对应的 SQL 语句。以下是一个简单的数据库设计: - 省份表 province,包括字段 id 和 name。 - 城市表 city,包括字段 id、name 和省份的外键 province_id。 - 区县表 district,包括字段 id、name 和城市的外键 city_id。 接下来是建表语句: ```sql -- 省份表 CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 城市表 CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `province_id` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `province_id` (`province_id`), CONSTRAINT `city_ibfk_1` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 区县表 CREATE TABLE `district` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `city_id` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `city_id` (`city_id`), CONSTRAINT `district_ibfk_1` FOREIGN KEY (`city_id`) REFERENCES `city` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` 接下来是查询省份、城市、区县的 SQL 语句: ```sql -- 查询所有省份 SELECT id, name FROM province; -- 查询某个省份下的所有城市 SELECT id, name FROM city WHERE province_id = ?; -- 查询某个城市下的所有区县 SELECT id, name FROM district WHERE city_id = ?; ``` 在 Java Web 项目中,可以使用 AjaxJSON 技术实现省市区三级联动。前端页面发送 Ajax 请求,后端通过 JDBC 连接数据库,查询对应的省份、城市、区县信息,并以 JSON 格式返回给前端页面。前端页面再解析 JSON 数据,更新页面的省份、城市、区县下拉框选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值