jquery ajax实现二级联动

最新推荐文章于 2024-03-16 22:53:25 发布

codingCoge

最新推荐文章于 2024-03-16 22:53:25 发布

阅读量3.1k

点赞数

分类专栏： JAVA Web基础

本文链接：https://blog.csdn.net/qq_38409944/article/details/81358307

版权

JAVA Web基础专栏收录该内容

60 篇文章 4 订阅

订阅专栏

前言：

还记得昨天看某位大佬的博客，看到了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);

codingCoge

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax实现二级联动

前言：还记得昨天看某位大佬的博客，看到了ajax实现二级联动，不由心痒痒也想实现一番，先贴上：链接：大佬的这篇博客学习过程：1. 于是我就去补了ajax，可是发现不行啊，https://blog.csdn.net/qq_38409944/article/details/813256622. 可是我只学过xml，ajax的数据传输主要是json，于是乎我又补了json，可是又...
复制链接

扫一扫