html使用ajax+jsp更新网页部分信息

最新推荐文章于 2023-12-01 14:18:38 发布

进击的白嘟

最新推荐文章于 2023-12-01 14:18:38 发布

阅读量1.5k

点赞数 1

分类专栏：问题解决文章标签： ajax html jsp

本文链接：https://blog.csdn.net/qq_25211323/article/details/68954596

版权

问题解决专栏收录该内容

6 篇文章 0 订阅

订阅专栏

建网站的时候，想要实现点击一个按钮，根据radio的选择查询某一特定信息，并把其返回到input输入框里，这里的按钮是在form表单里的。
遇到了三个问题：
1. 每次点击按钮网页都会刷新，把已经填好的还未提交的信息清空了；
2. 之前查资料，看到好多都用php，我电脑没装php，然后装了之后没成功，弄的环境整个崩溃了，所以恢复到之前的环境后放弃php这个方法；
3. 实现ajax信息提取后，respondText获取的信息是一个html网页文本，但我只需要网页的body里的信息。

=======我接下来说的就是我自己能实现的，能在服务器端实现，但我也不清楚这能不能在客户端实现，因为我看资料的时候有些说服务器运行脚本是.php和.asp======

问题一：怎么让按钮就是单纯的按钮，不刷新网页呢？
很简单，代码如下，直接在button属性里加type=“button”，如果不加，表单里的按钮会默认为type=“submit”

<button                                                 class=" " id="getlocation" onclick="nochecklocation()" type="button">按钮</button>

问题二：实现网页部分刷新

两个文件，一个是save.html，一个是getinfo.jsp
三个部分，html：1. 输入显示部分； 2. javascript函数部分。 .jsp: 3. 数据处理部分。
1.输入显示部分：

<form ...>
<div class="*">
<label for="factoryindex">使用单位ID：</label> <input type="text"                                        id="factoryindex" placeholder=""> <label                                            class="**" for="media">安全阀体积：</label> <label                                                    class="*"> <input type="radio"                                                  name="valvolume" id="small" value="small">Small                                             </label> <label class="*"> <input type="radio"                                                  name="valvolume" id ="large" value="large">Large
</label>
</div>
<label for="storagelocationnum">存储位置:</label> <input                                                type="text" id="storagelocationnum" placeholder=""><button                                                    class="***" id="getlocation" onclick="nochecklocation()" type="button">获取推荐存储位置</button>
</form>

2.javascript函数部分

<script type="text/javascript">

function nochecklocation(){
    var xmlhttp;
    var volume;
    var vol=document.getElementsByName("valvolume");
    if(!(vol[0].checked||vol[1].checked)){
        alert("请选择体积！");
        return 0;
    }
    else if(vol[0].checked){
        volume=vol[0].value;
    }
    else if(vol[1].checked){
        volume=vol[1].value;
    }
    if(window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();
    else
        xmlhttp=new ActiveXObjice("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){     document.getElementById("storagelocationnum").value=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","jsp/getlocation.jsp?volume="+encodeURIComponent(volume),true);
    xmlhttp.send(null);
    }
</script>

3.数据处理部分
上面两个都在同一个html文件里，这个部分在文件夹jsp里的文件getlocation.jsp里，因为我jsp连接数据库用的是javaBean，所以，如果你不是这样，请用你自己的方式连接，直到jsp能正常运行调用数据。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page
    import="java.io.*,java.sql.*,java.sql.Connection,java.sql.Statement,java.util.Formatter"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<jsp:useBean id="connect" class="com.xfzhang.bean.connection" />
<% 
String volum=request.getParameter("volume");
//out.println(volum);
try {
ResultSet rs=null;
String lo=new String();
if(volum.equals("small")){
    lo="select * from ***";
}else if(volum.equals("large")){
    lo="select * from ****";
}
rs=connect.query(lo);
while (rs.next()) {
        String sln=rs.getString("storagelocationnum");
        PrintWriter pw=response.getWriter();
        response.setContentType("html/text");
        pw.write(sln);
        pw.close();
}
    }catch (Exception e) {
    out.print("get data error!");
        //e.printStackTrace();
  }

%>
    <%-- jsp:include page="connection.jsp" flush="true"></jsp:include>--%>

    <%-- <jsp:forward page="test.jsp"></jsp:forward>--%>
</body>
</body>
</html>

之前说过，按照很多教程出来的都是网页，最主要的就是没有用

String sln=rs.getString("storagelocationnum");
PrintWriter pw=response.getWriter();
response.setContentType("html/text");
pw.write(sln);
pw.close();

这一段，我最开始用的就是jsp输出out.println()语句。
然后记住一定要有pw.close()哦！要不然得到的就是数据+空网页格式，可以试试看，还有就是因为我是要把数据填入input里，所以很多地方在2里的javascript里返回数据后，用的是
document.getElementById(“storagelocationnum”).innerHTML=xmlhttp.responseText;
然后当然就显示不出来啊，要用document.getElementById(“storagelocationnum”).value给input赋值。

进击的白嘟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html使用ajax+jsp更新网页部分信息

建网站的时候，想要实现点击一个按钮，根据radio的选择查询某一特定信息，并把其返回到input输入框里，这里的按钮是在form表单里的。遇到了三个问题： 1. 每次点击按钮网页都会刷新，把已经填好的还未提交的信息清空了； 2. 之前查资料，看到好多都用php，我电脑没装php，然后装了之后没成功，弄的环境整个崩溃了，所以恢复到之前的环境后放弃php这个方法； 3. 实现ajax信息提取后
复制链接

扫一扫