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);

    }

}
0

1个回答

这样就可以了

 <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>
0
ththcc
ththcc 如果解决了问题,求采纳一下下啊~~
2 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的。是时候展现真正的技术了!
其他相关推荐
java中调用ajax返回html格式
1.在jsp页面中 <%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> Inser here //回调函数 function callback(data){ $("#checkmenunamespan").html(""); $("#c
SpringMVC下后端返回前端出现中文乱码的解决方案
一、 问题描述 SpringMVC搭建的服务器,前端请求时返回的中文乱码。 二、 问题原因 有以下三种可能的原因: 1. 数据库编码设置 检查数据库的编码是否为UTF8,如果不是,以MySQL为例,设置编码格式,参考:MySQL修改表中字段编码格式 2. JDBC编码设置 以MySQL为例,在url后面附加编码参数: jdbc:mysql://localho...
springmvc 后端返回到前端乱码
springmvc 后端返回到前端乱码
Java处理JSON数据返回到前端的反斜杠
一、场景简述 在写后端返回JSON数据到前端的时候,遇到了前端一直无法获得后端传输的数据,但实际已经后端已经传输到前端了。在看前端获取到后端返回的数据的时候发现JSON中含有反斜杠,如下图 想必一定是这个转义符导致前端显示数据失败。 二、解决方案 笔者一开始用document.toJson().replace(&quot;\&quot;&quot;,&quot;'&quot;)将反斜杠+双引号转换成单引号,但无果。 笔者就用了imp...
后端list集合中的数据传递到前台HTML中显示(表格形式)
转载:https://www.cnblogs.com/baijinqiang/p/8594041.html关键字:web项目中前后台数据传递问题       在学习web项目的过程中,我们肯定会遇到前后台数据交换问题。这个问题我也思考了很久,今天借此总结一下。由于博主水平有限,如有不当之处,还请大家多多指正,,废话不所说进入正题。一、HTML页面通过ajax发送http请求        1,前端...
通过DWR实现在HTML和Java Script中直接调用服务端的Java Bean
通过DWR实现在HTML和Java Script中直接调用服务端的Java Bean
SpringMVC后端返回数据到前端页面方法总结
Spring MVC返回数据到页面有几种不同的方式,它们各自适用的情况也不同,下面简单总结一下。 对于每种方式都给出Controller中的相应方法。 首先还是页面userAdd.jsp。它既是发出请求的页面,也是接收返回结果的页面: &amp;lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; contentType=&quot;text/html;charset...
关于JavaWeb前端页面获取后端传过来的时间中时分秒丢失的问题
一个Spring Boot项目,昨天遇到一个令人蛋疼的问题,返回列表中有个时间字段,在测试环境上,返回的时间戳没有问题,但是部署到正式环境上,就出问题了,都被格式化成了“yyyy-MM-dd”字符串了,而且时分秒也莫名其妙的丢失了,实在不解,于是在后端日志是一通打印,从数据库中获得的时间也没有问题,也没有针对正式环境做特殊处理 于是上网百度,终于找到了解决办法,在属性的get方法上加上注解对...
php向前端发送的字符串中存在HTML标签如何正常显示
问题描述:php向前端发送的字符串中存在HTML标签如何正常显示? 从php后端获取字符串为“500 “500” 处理方法:使用htmlspecialchars方法进行处理。 详见:http://php.net/manual/zh/function.htmlspecialchars.php
将后台数据以List返回到HTML界面
    现阶段在做毕设,现在遇到的问题是我想把后台从数据库中取出的数据传到前端HTML页面,而且是List&amp;lt;E&amp;gt;集合,其中E我又是定义的一个video类,目的就是想在前端不同的地方输出不同的属性。    video的定义就是数据库中的几个字段:video{title,address,c_id}。    controller中代码如下:                int c_id=0...
Java学习——前后端数据交互(一)
当前的结果是提交之后js内有响应。不知道原因在哪个地方,下面是当前了解的一些知识。 1、在html页面要链接到js页面,要有个这样的东西(html页面) 2、在js页面要定义controller层的url地址,就是requestMapping后面的内容(js页面) 3、分为获取数据和提交数据(js页面) 首先是获取数据,shopInfoUrl是定义的conrol
ajax从后端没有返回到前端,直接执行error
今天学习遇到一个问题 其实这个问题是跟之前乱码一起发生的。 @RequestMapping(value=&quot;/PrimaryKey&quot;,produces={&quot;application/json;charset=UTF-8&quot;}, method=RequestMethod.POST) @ResponseBody public String test2(String name){ Syst...
针对移动端的java服务器,接收和json返回数据
本人新手,刚参加工作,前段时间让我写安卓服务端,java,使用的是SSH框架,去网上找了好多方法,这方面的好像不是太多(也可能是我没发现) {CSDN:CODE:x}
SpringMVC 返回前端乱码
SpringMVC 返回前端乱码
后台添加cookie,前端jsp获取不到
在开发中遇到问题:后台 Cookie c=new Cookie(“Cookie”, “11111111111111111111”); c.setPath(“/”); response.addCookie(c); 在前端jsp获取不到方法: Cookie[] cc=request.getCookies(); if(cc!=null){ for(int i=0; i
java发送http请求,解析html返回的技术
转载:http://blog.sina.com.cn/s/blog_683b7a840100o8q1.html java发送http请求,解析html返回的技术,主要是用于抓取网站数据。 思路:     java通过URLConnection链接目的地网址,链接成功后从inputStream中获取返回的html内容,获取后就可以按照正则匹配的方式或者第三方工具,根据页面信息的规律
java代码访问百度,返回html页面代码
package Mytest.model.test; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; public class HttpBaidu
使用html5 history实现微信端,再按一次返回按钮 返回微信
if(window.history.length==1){//判断是第一次从微信菜单进入页面 //写入空白历史记录 pushHistory(); } //延时监听 setTimeout(function () {
【JS】【客户端】在HTML里嵌入JavaScript
在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法: 内嵌,放置在和标签之间  (少) 放置在有标签的src属性指定的外部文件中  (多) 放置自HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定它  (很少) 放在一个URL里,这个URL使用特殊的协议”javas
前端中返回给浏览器的return ture和return false
1、在js中,传递给浏览器的布尔值意味着: return ture :浏览器将会继续执行其他操作, retrun false :浏览器不会执行其他操作。   2、clickme的onclick事件, HTML: 开始 js: document.getElementById("clickme").onclick = function(){ return false; }
关于JAVA中的MVC结果,Controller方法返回字符串到前端js出现乱码问题
我用的是在@RequestMapping里面加编码设置的,效果刚刚的
[Debug] - No.3 Thymeleaf 没有返回html只返回字符串
在使用Thymeleaf的时候,@RequestMapping对应的函数没有返回html文件而是返回了这个函数对应的字符串返回值 解决办法: 删除这个函数前面的@Responsebody注解,这个注解会返回Mapping函数指定的返回类型、例如String。而不是将其解析为html文件
html5手机端触屏事件(touch事件)第二章
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 事件属性一般通过 event.changedTouches获得client / clientY:// 触摸点相对于浏览
从后台获取数据到html界面上
HTML页面,ajax是基于id的,所有用id表示。 拿到的数据会显示在这里 &amp;lt;div id=&quot;test&quot;&amp;gt;&amp;lt;/div&amp;gt; ajax源码: $(document).ready(function() {             $.ajax({                 url : &quot;admin/get_online_ganbu.php&quot;,//后台请求的数据,用的...
Javaweb开发了解前端知识一、html&&css
01-html和CSS1、html2、CSS1、B/S 软件的结构 2、前端的开发流程 3、网页的组成部分页面由三部分内容组成!分别是内容(结构)、表现、行为。内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html技术来展示。表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用CSS技术实现行为,指的是页面中元素与输入设备交互的响应。一般使...
后台如何解析html
String str = "空白字体只是斜体斜体划线1111111加粗划线样式空白字体只是斜体斜体划线"; 上面这个str字符串,如何解析出类似于 : 文字:该文字块有哪些属性(i/u/b) //文字样式 public class FontStyle { private boolean isB = false;//是否加粗 private boolean isU = false;//是
JsJavaInterface
Demo中,先加载assets中的html页面,然后,java调用js中的函数,在js的函数中再调用java的函数,并返回字符串.最后显示在html上.
PrintWriter 返回前端中文乱码
servlet是一个好东西,有时候虽然麻烦,但是有时开发过程中对外提供http接口,还是比较方便的。 但是返回对方数据时,如果包含中文,那就可能会遇到中文乱码问题。 返回数据一般使用PrintWriter 首先需要知道对方的编码格式。 然后在返回代码里写下下面两句。  protected void doPost(HttpServletRequest request, HttpServle
解析带有html标签的json数据
解析带有html标签的json数据
有关于java项目406的问题
最近太忙了,定了一大堆计划都还没有去执行,也怪自己还没有摒弃惰性。今天在修改项目的时候遇到的一个406的问题,项目view层是后台去调用,也就是是使用spring的mvc,现在要改为,页面只能从页面跳转,不能从后台设置跳转,目的大概是长期发展下来前后端更容易管理吧(我猜的)。后端接口只是数据处理和返回的作用,一般都是设置为json格式。 于是乎就使用了spring的@ResponseBody标签:
java后端的list转成jsonArray返回前端开发
有时开发项目需要用到Ajax,使用ajax就不免返回的数据是json,下面是一w
ajax的接受之页面,一定要有echo,html页面的返回函数success才能正常运行
ajax的接受之页面,一定要有echo,html页面的返回函数success才能正常运行。 如果接受值的页面没有echo任何东西,success就无法运行。
Jsoup请求数据返回json包含html标签
楔子 jsoup使用get请求数据,得到的数据包含html标签,导致在使用json转javabean时出现错误。 jsoup请求返回json StringattenNextPart=Jsoup.connect(nextUrl).headers(SysConstant.headMap).ignoreContentType(true).get().body().html(); ...
html页面“回到顶部”按钮
使用js:window.scrollTo('0','0');就直接回到了页面顶部,例如:返回顶部
前台请求后台返回的json字符串中含有html标签!
问题: 前台请求后台返回一个json字符串,将其转换为json数组,进行遍历: 遍历的过程中拼接html,每个元素的信息放入一个a标签下面, 然后点击a标签可以将元素传到相应的onclick方法中, for(var i = 0; messageArray != null && i < messageArray.length; i++) { var message = messageAr
JAVA中HTML接口的调用
在平常的项目开发中,经常会遇到多系统、跨平台的接口调用,常用的接口调用方式有RMI、HTML、WebService、Socket、JMS等,本文将详细介绍HTML接口的调用方式。 1、读取URL的内容 public String getMessage(String urlValue){ StringBuffer result = new StringBuffer(); try {
如何处理从后台返回的带html的文本格式(比如富文本存进去的东西)
//进入页面直接加载,el表达$(function() {        viewContent();    });     function viewContent(){        var $iframe =$('&amp;lt;iframe src=&quot;about:blank&quot; frameborder=0 /&amp;gt;');        $iframe.ready(function()     ...
向前端返回数据时,自动忽略参数为null的属性
//该注解可以将实体类中的null的属性自动忽略 @JsonInclude(JsonInclude.Include.NON_NULL)该注解可以对实现进行注解,注解后该类中出现null的属性时,传递回页面的json中自动忽略在springboot这种也可以通过application.yml配置文件中配置全局自动忽略spring:     jackson:      default-property...
前端判断后端返回的null值及判断
后端返回数据前端判断 :   (data.data[1].prizeName==null) js中直接判断即可 var tmp = null; if (!tmp &amp;amp;&amp;amp; typeof(tmp)!=&quot;undefined&quot; &amp;amp;&amp;amp; tmp!=0){ alert(&quot;null&quot;);}这种是前端定义变量,前端判断方法 前端判断!坑            if(! &quot;a&quot;==...
前端根据后端二进制流生成文件
var url =&quot;&quot;; var data = {}; $http({ url: url, method: 'post', data: data, responsetype: 'arraybuffer' }) .success(function (data) { var blob = new bl...