2 qq 43391287 qq_43391287 于 2018.10.11 23:26 提问

HTML中没有java端的返回

第一次选择长方形选项输入数据单击计算没有反应,选项换成圆形后输入并单击计算才转换并弹出数值。按了浏览器的后退键后才可以正常使用。

这是HTML的代码:
<!DOCTYPE html>



Insert title here

<form method="POST" action="my3.svlt">
    <select id="selectid" name=t onchange="role()">
        <option value="0">请选择</option>
        <option value="1">长方形面积</option>
        <option value="2">圆形面积</option>
        <option value="3">长方形周长</option>
        <option value="4">圆形周长</option>
    </select>


    <div id="length" style="display: none;">
        <span class="x-red"></span>长 <input type="text" name=len required=""
            autocomplete="off" class="layui-input" value="">
    </div>
    <div id="width" style="display: none;">
        <span class="x-red"></span>宽 <input type="text" name=wid required=""
            autocomplete="off" class="layui-input" value="">
    </div>
    <div id="ridus" style="display: none;">
        <span class="x-red"></span>半径 <input type="text" name=rid required=""
            autocomplete="off" class="layui-input" value="">
    </div>


    <script>
        function role() {
            var sel1 = document.getElementById('selectid');
            var index = sel1.selectedIndex;
            var value = sel1.options[index].value; 
            if (value == 1) {
                document.getElementById("length").style.display = "block";
                document.getElementById("width").style.display = "block";
                document.getElementById("ridus").style.display = "none";

            } else if (value == 2) {
                document.getElementById("length").style.display = "none";
                document.getElementById("width").style.display = "none";
                document.getElementById("ridus").style.display = "block";
            } else if (value == 3) {
                document.getElementById("length").style.display = "block";
                document.getElementById("width").style.display = "block";
                document.getElementById("ridus").style.display = "none";

            } else if (value == 4) {
                document.getElementById("length").style.display = "none";
                document.getElementById("width").style.display = "none";
                document.getElementById("ridus").style.display = "block";

            } else {
                document.getElementById("length").style.display = "none";
                document.getElementById("width").style.display = "none";
                document.getElementById("ridus").style.display = "none";
            }
        }
    </script>


    <button>计算</button>
</form>


这是servl中doPost的代码:
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");

    int value = Integer.parseInt(request.getParameter("t"));
    System.out.println(+value);
    if (value == 1) {
        float l = 0;
        try {
            l = Float.parseFloat(request.getParameter("len"));
        } catch (Exception e) {
            l = 0;
        }
        if (l <= 0) {
            response.getWriter().println("长方形的长度len不符合要求");
            return;
        }
        float w = 0;
        try {
            w = Float.parseFloat(request.getParameter("wid"));
        } catch (Exception e) {
            w = 0;
        }
        if (w <= 0) {
            response.getWriter().println("长方形的宽度wid不符合要求");
            return;
        }
        float s = l * w;
        String content = "长方形的面积为:" + s;
        response.getWriter().println(content);
    } else if (value == 3) {
        float l = 0;
        try {
            l = Float.parseFloat(request.getParameter("len"));
        } catch (Exception e) {
            l = 0;
        }
        if (l <= 0) {
            response.getWriter().println("长方形的长度len不符合要求");
            return;
        }
        float w = 0;
        try {
            w = Float.parseFloat(request.getParameter("wid"));
        } catch (Exception e) {
            w = 0;
        }
        if (w <= 0) {
            response.getWriter().println("长方形的宽度wid不符合要求");
            return;
        }
        float d = 2*(l + w);

        String content = "长方形的周长为:" + d;
        response.getWriter().println(content);

    } else if (value == 2) {
        float r = 0;
        try {
            r = Float.parseFloat(request.getParameter("rid"));
        } catch (Exception e) {
            r = 0;
        }
        if (r <= 0) {
            response.getWriter().println("圆形的半径rid不符合要求");
            return;
        }
        float Pi = 3.14f;

        float s = Pi * r * r;

        String content = "圆形的面积为:" + s;
        response.getWriter().println(content);
    } else if (value == 4) {
        float r = 0;
        try {
            r = Float.parseFloat(request.getParameter("rid"));
        } catch (Exception e) {
            r = 0;
        }
        if (r <= 0) {
            response.getWriter().println("圆形的半径rid不符合要求");
            return;
        }
        float Pi = 3.14f;

        float d = 2 * Pi * r;

        String content = "圆形的周长为:" + d;
        response.getWriter().println(content);
    }else {
        String content = "请选择功能" ;
        response.getWriter().println(content);

    }

}

1个回答

ththcc
ththcc   2018.10.12 10:35

这样就可以了

 <form id="fm" method="POST" action="my3.svlt">
        <select id="selectid" name=t onchange="role()">
            <option value="0">请选择</option>
            <option value="1">长方形面积</option>
            <option value="2">圆形面积</option>
            <option value="3">长方形周长</option>
            <option value="4">圆形周长</option>
        </select>

        <div id="length" style="display: none;">
            <span class="x-red"></span>长 <input type="text" name=len required=""
                autocomplete="off" class="layui-input" value="">
        </div>
        <div id="width" style="display: none;">
            <span class="x-red"></span>宽 <input type="text" name=wid required=""
                autocomplete="off" class="layui-input" value="">
        </div>
        <div id="ridus" style="display: none;">
            <span class="x-red"></span>半径 <input type="text" name=rid required=""
                autocomplete="off" class="layui-input" value="">
        </div>


        <script>
            function role() {
                var sel1 = document.getElementById('selectid');
                var index = sel1.selectedIndex;
                var value = sel1.options[index].value;
                if (value == 1) {
                    document.getElementById("length").style.display = "block";
                    document.getElementById("width").style.display = "block";
                    document.getElementById("ridus").style.display = "none";

                } else if (value == 2) {
                    document.getElementById("length").style.display = "none";
                    document.getElementById("width").style.display = "none";
                    document.getElementById("ridus").style.display = "block";
                } else if (value == 3) {
                    document.getElementById("length").style.display = "block";
                    document.getElementById("width").style.display = "block";
                    document.getElementById("ridus").style.display = "none";

                } else if (value == 4) {
                    document.getElementById("length").style.display = "none";
                    document.getElementById("width").style.display = "none";
                    document.getElementById("ridus").style.display = "block";

                } else {
                    document.getElementById("length").style.display = "none";
                    document.getElementById("width").style.display = "none";
                    document.getElementById("ridus").style.display = "none";
                }
            }
            function submitFm() {
                var form = document.getElementById('fm');
                form.submit();
            }
        </script>
        <button  onclick="submitFm()" type="submit">计算</button>
    </form>
ththcc
ththcc 如果解决了问题,求采纳一下下啊~~
4 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
[笔记] Java服务端将数据发送到客户端html页面中显示
在页面中使用了Ajax向服务器请求数据,服务端返回的数据必须和客户端的页面需求的数据格式要一致。客户的短请求如下:请求中为了解决跨域问题,指定的传输数据格式是 jsonp 格式数据,所以,要求java服务端返回的数据也是和json格式一致,在这里可以返回一个map对象的字符串:后台返回数据之后,前台获取数据示例,获取数据之后将html片段插入到指定的id中:...
java中调用ajax返回html格式
1.在jsp页面中 <%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> Inser here //回调函数 function callback(data){ $("#checkmenunamespan").html(""); $("#c
通过DWR实现在HTML和Java Script中直接调用服务端的Java Bean
通过DWR实现在HTML和Java Script中直接调用服务端的Java Bean
前端 ,后端 关于数据交互的问题
在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。  目录: 1. HTML赋值 2. JS赋值 3. script填充JSON 4. AJAX获取JSON 5. WebSocket实时传输数据 6. 总结 1. HTML赋值 输出到 Element 的 value 或 data-name  " /> "> 渲染结果
springmvc 后端返回到前端乱码
springmvc 后端返回到前端乱码
SpringMVC 返回前端乱码
SpringMVC 返回前端乱码
针对移动端的java服务器,接收和json返回数据
本人新手,刚参加工作,前段时间让我写安卓服务端,java,使用的是SSH框架,去网上找了好多方法,这方面的好像不是太多(也可能是我没发现) {CSDN:CODE:x}
后端list集合中的数据传递到前台HTML中显示(表格形式)
转载:https://www.cnblogs.com/baijinqiang/p/8594041.html关键字:web项目中前后台数据传递问题       在学习web项目的过程中,我们肯定会遇到前后台数据交换问题。这个问题我也思考了很久,今天借此总结一下。由于博主水平有限,如有不当之处,还请大家多多指正,,废话不所说进入正题。一、HTML页面通过ajax发送http请求        1,前端...
关于如何在javaweb 中返回准确的响应状态码
问题 今天使用springboot进行项目框架的搭建,返回json数据给前端,在对响应返回的格式上面自己在思考需不要返回一个精确的响应状态码,该如何精确返回,势必需要在controller层获取httpresponse对象,是否有什么好的解决办法 解决 通过拦截器,进行拦截请求的状态。前后端分离项目使用这个办法不好获取状态值 通过定义请求域基类, public class BaseCom...
JAVA前端与后端参数传递方法小结
1,从Action中传值到JSP页面的方法      ①在Action中定义一个成员变量,然后对这个成员变量提供get/set方法,在JSP页面就可以取到这个变量的值了。   1)在Action中定义成员变量 //定义一个成员变量 private String message; //提供get/set方法 public String getMessage() { return m