**
JavaWeb必备知识----Json和Ajax
**
先来了解一下,什么是Json~
**
具体概念咱就不说了百度上一搜便是,直接上干货:
1.1Json在JavaScript中的使用:
**
1.1.1 Json 的声明:
json数组由大括号包围,里面都是键值对,键使用引号引起来.键和值之间使用冒号进行分隔.
每组键值对之间 使用逗号来进行分隔. 这样格式的数据我们就叫json.
var jsonObj = {
"key1":12,
"key2":"abc",
"key3":true,
"key4":[12,"abc",true], //数据类型可以是整型,可以是字符串,可以是boolean类型,也可以是另一个json数组
"key5":[{
"key5_1_1":511,
"key5_1_2":"abc1"
},{
"key5_2_1":521,
"key5_2_2":"abc2"
},{
"key5_3_1":531,
"key5_3_2":"abc3"
}]
};
1.1.2 Json 数组数值的取出:
Json.key 就可以取出对应key 的value
alert( jsonObj.key1 ); // 12
alert( jsonObj.key2 ); // abc
alert( jsonObj.key3 ); // true
alert( jsonObj.key4.length ); //3
var arr = jsonObj.key4;
for (var i = 0; i < jsonObj.key4.length; i++) {
alert( arr[i] ); //依次是 12,abc,true
}
alert( jsonObj.key5[0].key5_1_1 ); //511
var arr5 = jsonObj.key6;
for (var i = 0; i < arr5.length; i++) {
// 每一个都是json对象
var arr5Element = arr5[i];
alert(" 1 = " + arr5Element.key5_1_1 + " , 2 = " + arr5Element.key5_1_2 );
}
1.1.3 Json数据常用的两种方式:
我们常说的Json数据有两种形式: 一种是Json对象,一种是Json 字符串
JSON.stringify() --> 可以把json对象转换为json字符串
JSON.parse() --> 把json字符串转换为json对象
// 把json对象转换为json字符串
var s = JSON.stringify( jsonObj );
alert( s ); // json字符串
// 把json字符串转换为json对象
var obj = JSON.parse( s );
alert( obj ); //json对象
**
1.2Josn在Java中的使用
**
1.2.1Json 和JavaBean 之间转换
//创建一个pojo 数据与json 进行转换
public class Person {
private Integer id;
private String name;
public Person() {
}
public Person(Integer id, String name) {
this.id = id;
this.name = name;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Person{" +
"id=" + id +
", name='" + name + '\'' +
'}';
}
}
@Test
public void test() {
Person person = new Person(1,"Json");
// 创建谷歌gson包中提供的工具类
Gson gson = new Gson();
// 使用gson.toJson();
String jsonPersonString = gson.toJson(person);
System.out.println( jsonPersonString );
// 还可以把json字符串转换javaBean
Person person1 = gson.fromJson(jsonPersonString, Person.class);
System.out.println(person1);
}
输出结果如下:
1.2.2 List和Json 相互转换
List和Json 相互转换,如果Json字符串转换成List时,我们需要新建一个List存放的Bean的类型的类,如下:
/**
* 泛型是要把json转换回去的具体类型
*/
public class PersonListType extends TypeToken<ArrayList<Person>> {
}
这里做一个空类即可.
@Test
public void test2() {
List<Person> people = new ArrayList<>();
people.add(new Person(1,"我是一"));
people.add(new Person(2,"我是二"));
people.add(new Person(3,"我是三"));
// 先创建gson工具类
Gson gson = new Gson();
// 把list集合转换为json数组
String jsonPeopleString = gson.toJson(people);
System.out.println( jsonPeopleString );
// fromJson把json字符串转换回list集合
// toJson() 是把对象转换为json字符串
// fromJson是把json字符串转换回java对象
// 如果是转回一个JavaBean.则第二个参数是转换的javaBean的具体类型
// 如果是转回一个集合.则第二个参数是type类型 这里需要新new一个空的类型类
List<Person> list = gson.fromJson(jsonPeopleString, new PersonListType().getType());
Person person = (Person) list.get(0);
System.out.println(person);
}
上面测试的输出结果如下:
1.2.3 Map和Json 的相互转换
同List转换,也需要创建一个类型类,当然我们可以使用匿名类来解决麻烦
@Test
public void test3() {
Map<String,Person> personMap = new HashMap<>();
personMap.put("p1",new Person(1,"一号好帅"));
personMap.put("p2",new Person(2,"二号好帅"));
personMap.put("p3",new Person(3,"三号好美"));
Gson gson = new Gson();
// 所有java对象转换为json字符串.都是统一使用 toJson()方法
String json = gson.toJson(personMap);
System.out.println(json);
// 把json字符串转换回 map 集合
// 官方推荐使用的匿名内部类
Map<String,Person> o = gson.fromJson(json,new TypeToken< HashMap<String,Person> >(){}.getType());
System.out.println( o );
Person person = o.get("p1");
System.out.println(person);
}
运行结果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200513201018369.png)
## 2.1Ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器通过js异步发起请求,局部更新页面的技术。
**
## 2.1.1原生Ajax的演示:
**
```javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax请求示例</title>
<script type="text/javascript">
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2、调用open方法设置请求参数
xhr.open("GET","http://localhost:8080/ajax_test/ajaxServlet?action=javaScriptAjax",true);
// 4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
xhr.onreadystatechange = function(){
// 要同时判断两个值,才可以获取响应信息
if (xhr.readyState == 4 && xhr.status == 200) {
// alert( xhr.responseText );
// document.getElementById("div01").innerHTML = xhr.responseText;
// 把服务器返回的数据转换为json对象
var jsonObj = JSON.parse(xhr.responseText);
document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
}
}
// 3、调用send方法发送请求
xhr.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
同时我们需要在服务器端进行配置:
@WebServlet(name = "AjaxServlet",value = "/ajaxServlet")
public class AjaxServlet extends BaseServlet {
/**
* 表示我们演示的第一个Ajax请求的方法
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("ajax 兄弟,你来了!!!");
Person person = new Person(1,"我是一号");
// 先把要返回的数据转为json字符串
Gson gson = new Gson();
String json = gson.toJson(person);
response.getWriter().write(json);
}
}
BaseServlet如下:
public abstract class BaseServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 解决响应中文乱码
response.setContentType("text/html; charset=UTF-8");
// 获取业务的鉴别字符串 == >> 就可以知道是什么业务操作
String action = request.getParameter("action");
try {
// this是表示当前具体的对象实例.
// 通过action业务鉴别字符串,得到对应的业务方法
Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
// 设置业务方法
method.invoke(this,request,response );
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException(e);
}
}
}
这样是不是觉得非常繁琐,不方便,没事,我们还有如下的JQuery封装后的Ajax:
2,2,2 JQuery中的Ajax
ajax() 方法是jQuery中提供的专门用于发起Ajax请求的方法.
我们只需要给这个方法传递请求时需要的信息即可!!!
$.ajax方法
url 请求的资源路径
type 请求的方式 GET或POST
data 发送给服务器的数据
一种数据格式是: name=value&name=value
另一种数据格式是: { key:value , key : value }
success 成功的回调函数
dataType 响应的数据类型
text 纯文本
xml 返回是xml数据
json 返回是json对象
\ 先把整个页面po出来~:
// ajax请求
$("#ajaxBtn").click(function(){
// 这是ajax() 的单击事件
$.ajax({
url:"http://localhost:8080/ajax_test/ajaxServlet",
type : "GET",
data: "action=jQueryAjax",
success:function(data){// success的函数要有一个参数.这个参数就是服务器返回的数据
// alert(data);
var jsonObj = JSON.parse(data);
$("#msg").html("编号: " + jsonObj.id + " , 名称: " + jsonObj.name);
},
dataType:"text"
});
});
// ajax--get请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/ajax_test/ajaxServlet",
{action:"jQueryGet"},
function (data) {
// alert(data);
// var jsonObj = JSON.parse(data);
// $("#msg").html("编号: " + jsonObj.id + " , 名称: " + jsonObj.name);
$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
},"json");
});
// ajax--post请求
$("#postBtn").click(function(){
// post请求
$.post("http://localhost:8080/ajax_test/ajaxServlet",
"action=jQueryPost",
function (data) {
$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
},"json");
});
// ajax--getJson请求
$("#getJSONBtn").click(function(){
// 调用
$.getJSON("http://localhost:8080/ajax_test/ajaxServlet","action=jQueryGetJSON",function (data) {
$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
});
});
// ajax请求
$("#submit").click(function(){
// 把参数序列化
$.getJSON("http://localhost:8080/ajax_test/ajaxServlet",
"action=jQuerySerialize&"+$("#form01").serialize(),
function (data) {
$("#msg").html("编号: " + data.id + " , 名称: " + data.name);
}
);
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJSONBtn">$.getJSON请求</button>
</div>
<!--自己添加一个,用于局部更新数据-->
<div id="msg"></div>
<br/><br/>
<form id="form01" action="http://localhost:8080">
用户名:<input name="username" type="text" /><br/>
密码:<input name="password" type="password" /><br/>
下拉单选:<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选:
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
复选:
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
单选:
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>
. g e t 方 法 和 .get方法和 .get方法和.post方法
我们可以使用这两个方法来更加简化:
.
g
e
t
(
)
方
法
底
层
调
用
的
是
.get()方法底层调用的是
.get()方法底层调用的是.ajax()方法,只是少似了一个参数.,就是GET.
.
p
o
s
t
(
)
方
法
底
层
调
用
的
是
.post()方法底层调用的是
.post()方法底层调用的是.ajax()方法,只是少似了一个参数.,就是POST.
url 请求的资源路径
data 发送给服务器的数据
格式有: name=value&name=value 或 { key:value,key:value}
callback 成功的回调函数
type 返回的数据类型: text , xml , json
$.getJSON方法
固定以get请求的方式发起ajax请求,返回的数据类型固定是json对象
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数
表单序列化serialize()
它可以把表单中,所有表单项,都以name=value&name=value的形式获取到它们的信息.
使用示例:
form对象.serialize()