前言:
还记得昨天看某位大佬的博客,看到了ajax实现二级联动,不由心痒痒也想实现一番,先贴上:链接:大佬的这篇博客
学习过程:
1. 于是我就去补了ajax
,可是发现不行啊,
https://blog.csdn.net/qq_38409944/article/details/81325662
2. 可是我只学过xml,ajax的数据传输主要是json
,于是乎我又补了json,可是又发现不行啊,
https://blog.csdn.net/qq_38409944/article/details/81324110
3. json对象只有一个啊,如果要获取一个系列的json,那得多麻烦啊,肯定还有其他方法,于是我又看到了JSONArray
(JSONObject的数组形式,而且是后台存储)
https://blog.csdn.net/qq_38409944/article/details/81334625
4. 现在总可以了吧,可是不行啊,多累赘啊 原生态的ajax光获取XMLHttprequest就得好长一段代码,还是不行啊得更简练啊,于是乎,我又学习了jquery的ajax实现方式。
http://www.runoob.com/jquery/jquery-ajax-intro.html
5. 可是tm又有问题了,jquery的ajax的实现方式有那么多,我到底该用哪一个啊。
https://blog.csdn.net/qq_38409944/article/details/81352251
总结:
看着东西不多,就一个ajax 实现联动效果。可是如果真的想提炼代码,深究下去,学问可就多了。相信这些问题,现在跳过了,以后迟早要面对的,欠下的债还是要还的。
前提:
确认ajax方式:这里我决定使用原生态的jquery方法$.ajax()来实现。原因:为了更加理解ajax的交互方式,还有是为了解决发生错误信息。
好了进入正题: jquery ajax 实现二级联动小Demo
前台: jquery ajax jsp
后台:servlet jdbc
前台比较简陋,没有用到css等修饰美化,主要的是为了实现功能:
当点击按钮的时候局部刷新一级(班级)
当班级被选择修改值后,局部刷新二级联动(学生)
实现的是javaweb版的二级联动,不过前台我没有使用jsp的标签,是为了更好地扩展而不局限于java。
并且jsp已经是过去式了,使用标签反而是本末倒置,所以前台是纯jquery。
具体的二级联动我已经放到Git上,所需的数据库也在里面。
https://github.com/jjc123/Two-level-linkage
所需的jar包已经上传到百度云盘:
https://pan.baidu.com/s/1ikjc9F0F9zoiy5zesBKe1g
添加所需的数据库
mysql -uroot -p classandstudents < D:/my.sql
Enter password: ******
花絮:
为了验证:前后台是否可以完整交互
:
1. 前台能否传递数据到后台
2. 后台能否通过创建List数组赋值给JSONArray并返回前台
在写这个demo之前写了一个ajax的交互demo:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mybutton").click(function() {
$.ajax({
url : "/Json/JsonServlet",
type : "POST",
async : true,
dataType : "json",
data : {
name : "前台数据",
age : 12
},
success : function(result) {
$("#mydiv").html(result[0].name);
},
error : function(xhr) {
alert("错误提示: " + xhr.status + " " + xhr.statusText);
}
});
});
});
</script>
</head>
<body>
<button type="button" id="mybutton">Click
Me!</button>
<div id="mydiv"></div>
</body>
后台:Student 是一个自定义的一个bean类。
Student类:
public class Student {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public Integer getNumber() {
return number;
}
public void setNumber(Integer number) {
this.number = number;
}
private int age;
private Integer number;
}
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println(request.getParameter("name"));
System.out.println(request.getParameter("age"));
List<Student> list = new ArrayList<Student>();
Student student = new Student();
student.setAge(12);
student.setName("小明");
list.add(student);
JSONArray jsonArray = new JSONArray(list);
response.getWriter().print(jsonArray);