关于servlet和JSP通过AJAX传值之间的那些事

最新推荐文章于 2021-08-05 14:36:15 发布

原创最新推荐文章于 2021-08-05 14:36:15 发布 · 707 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #servlet #JSP #json #数据传递错误

servlet和JSP 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Servlet和JSP之间使用AJAX进行数据传递的问题，包括值的类型、请求方式和路径编写注意事项。以省市联动为例，讲解了在处理JSON数据时遇到的eval函数理解误区，并提供了解决方案。最后提到了使用JQuery简化AJAX操作，并分享了具体代码和资源链接。

关于servlet和JSP通过AJAX传值

看到这个servlet和JSP，你就应该会想起一些关于它们的知识点，而本文采用的是以案例来说明它们之间这样进行传值的。

关于servlet和JSP通过AJAX传值之间的沟通交流：不过是JSP页面发送请求（get或者post请求），经过web.xml文件servlet将请求与具体java的实现类形成映射之后，通过具体的类来实现请求处理，并将数据通过response或者其他方式返回。

其中注意点有：
（1）相互传递的值的类型，（json或是其他），不同的数据类型，处理方式不同。
（2）请求的方式不同，代码编写也不一样。这就要涉及到get与post请求的不同之处了
（3）路径的编写，很可能报404。注意${pageContext.request.contextPath}/……

首先，这个案例以省市联动作为参考案例完成前后端的交互：
教学视频：https://www.bilibili.com/video/BV1kJ411C7yh?p=6

其中在视频中还是注意到了一些问题：
其中有一段代码是这样的：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省市联动</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
</head>
<body onload="listProvice();">

<script type="text/javascript">
    function listProvince() {
        //创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //获取后台传过来的数据
        var jsonString = xhr.responseText;

        //回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.state == 200) {
                    //接收服务器传过来的字符串
                    //json格式 [{"code":"001","name":"北京市"},{"code":"002","name":"上海市"}……]
                    var jsonString = xhr.responseText;
                    console.log(jsonString);
                    eval("var arr =" + jsonString);
                    //遍历数组
                    var html = "<option value=''>--请选择省份--</option>";
                    for (var i = 0; i < arr.lenth; i++) {
                        var provinceJSON = arr[i];
                        html += "<option value='" + provinceJSON.code + "'>" + provinceJSON.name + "</option>";
                    }
                    document.getElementById("provinceList").innerHTML = html;

                } else {
                    //显示错误消息
                    alert(xhr.state);
                }
            }
        };
        //打开通道
        xhr.open("GET", "${pageContext.request.contextPath}/province/list.do?age=23", true);
        //发送请求
        xhr.send();
    }
</script>

<select id="provinceList" onchange="listCity(this.value)"></select>

<span id="citySpan"></span>

</body>
</html>

当后台传入数据时；我把它封装成[{"code":"001","name":"北京市"},{"code":"002","name":"上海市"}……]然后将其传到ajax回调函数中，但总是xhr.state!=200，最终导致失败。后来发现原因是传过来的参数形式是字符串类型，但是我用eval函数仍然不起作用，不能转成json对象。
但是不知道视频为什么是对的？？？
最终知道原来是对eval的理解有问题。对于eval，我只能放链接了：https://blog.csdn.net/ITCSDN_/article/details/111189684;

后来我也知道，原来我传过来的反正不是json，这时可以有两种方式，第一可以将前端接收数据改为Json，或者将后端的传的数据事先改为Json，但是我没用这两种了。

我不想用原生的AJAX，所以直接将代码改成了JQuery的了，注意没有使用dataType:“json”。后台是用Maven工程建立的，当然不用也可以。其实也是因为我代码改写之后才发现之前的问题的。而后台的代码和视频中的差不多。
代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省市联动</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
</head>
<body onload="listProvice();">

<script type="text/javascript">
    //JQuery
    function listProvice() {
        $.ajax({
            url: "${pageContext.request.contextPath}/province/list.do",
            type: "GET",
            success: function (data) {
                alert(data);
                //[{"code":"001","name":"北京市"},{"code":"002","name":"上海市"},{"code":"003","name":"广东省"},{"code":"004","name":"深圳市"}]
                var arr = data;
                var jsonObj = JSON.parse(data);
                var html = "<option value=''>--请选择省份--</option>";
                for (var i = 0; i < jsonObj.length; i++) {
                    html += "<select><option value='" + jsonObj[i].code + "'>" + jsonObj[i].name + "</option>";
                }
                document.getElementById("provinceList").innerHTML = html;
            },
            fail: function (data) {
                alert(111);
            }
        });
    }

    function listCity(pcode) {
        $.ajax({
            url: "${pageContext.request.contextPath}/city/list.do?_timeStamp" + new Date().getTime() + "&pcode=" + pcode,
            type: "GET",
            success: function (data) {
                alert(data);
                //[{"code":"001","name":"朝阳区"},{"code":"001","name":"xxx"}……]
                var arr = data;
                var cityJson = JSON.parse(data);
                var html = "<select><option value=''>--请选择城市--</option>";
                for (var i = 0; i < cityJson.length; i++) {
                    html += "<option value='" + cityJson[i].code + "'>" + cityJson[i].name + "</option>";
                }
                html += "</select>";
                document.getElementById("citySpan").innerHTML = html;
            },
            fail: function (data) {
                alert(111);
            }
        });
    }
</script>

<select id="provinceList" onchange="listCity(this.value)"></select>

<span id="citySpan"></span>

</body>
</html>

最终也实现了省市联动的效果。
具体的代码（sql脚本，java项目）我会放在CSDN上，免费下载。
https://download.csdn.net/download/ITCSDN_/13690463

楠哥-------一心想为IT行业添砖加瓦，却总是面向cv编程的程序员。
谢谢阅读，无误点赞，有误还望评论区指正。