同一个jsp页面中局部刷新问题

假设一个jsp页面中，有一个表，两行第一行有一个submit控件初始化时第二行没有信息当点击submit时第二行出现一行字（随便什么信息）实现这个功能是不是要用到AJAX... 假设一个jsp页面中，有一个表，两行
第一行有一个submit控件
初始化时第二行没有信息
当点击submit时第二行出现一行字（随便什么信息）
实现这个功能是不是要用到AJAX技术？不懂这个方面的知识
哪位能不能给出源码.谢谢！！！
这个显示的数据是从数据库中读取的展开

 我来答

9个回答

#合辑# 机票是越早买越便宜吗？

韦涵涵
推荐于2016-06-23 · TA获得超过3892个赞

知道大有可为答主

回答量：1034

采纳率：100%

帮助的人：1510万

我也去答题访问个人页

关注

展开全部

文件一; GetUser.java

package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetUser extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String userno=request.getParameter("no");

List<User> list=new ArrayList<User>();

User user1=new User();
User user2=new User();
User user3=new User();
user1.setNo("101");
user1.setUsername("wei");
user1.setSex("man");

user2.setNo("102");
user2.setUsername("xiang");
user2.setSex("man");

user3.setNo("103");
user3.setUsername("yang");
user3.setSex("women");

list.add(user1);
list.add(user2);
list.add(user3);

PrintWriter out=response.getWriter();

response.setContentType("text/xml");
response.setCharacterEncoding("GB2312");

response.setHeader("Cache-Control", "no-cache");

out.println("<?xml version='1.0' encoding='gb2312'?>");
out.println("<response>");

for(int i=0;i<list.size();i++){

if(list.get(i).getNo().equalsIgnoreCase(userno)){
out.print("<username>"+list.get(i).getUsername()+"</username>");
out.print("<sex>"+list.get(i).getSex()+"</sex>");
}
}
out.println("</response>");
out.close();

}
}

文件二： User.java

package ajax;

public class User {
private String no;
private String username;
private String sex;
public String getNo() {
return no;
}
public void setNo(String no) {
this.no = no;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}

}

文件三： index.jsp

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" charset="GB2312">
var xmlHttp;
/**
*创建一个XMLHttpRequest对象
*/
function makeRequest(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
/**
*得到一页用户的信息
*/
function createAjax(no){
makeRequest();
var url="GetUser?no="+no;
xmlHttp.open('GET',url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.setRequestHeader("Content-Type","text/html;charset=UTF-8");
xmlHttp.send(null);
}
/**
*显示一页用户的信息
*/
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
xmlDom=xmlHttp.responseXML;

document.getElementById('username').value=xmlDom.getElementsByTagName('username')[0].firstChild.data;
document.getElementById('sex').value=xmlDom.getElementsByTagName('sex')[0].firstChild.data;

}else{
alert("xmlHttp status: "+xmlHttp.status);
}
}else{
}
}

</script>
<title>display</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>

<body>
<table cellpadding="0" cellspacing="0" bgcolor="#33CCFF" border="0">
<tr>
<td>
学号
</td>

<td>
<input id=no name=no onblur="createAjax(this.value);" />
</td>
</tr>
<tr>
<td>
姓名
</td>

<td>
<input id=username name=username />
</td>

</tr>
<tr>
<td>
性别
</td>

<td>
<input id=sex name=sex />
</td>

</tr>
</table>
</body>
</html>

文件四：web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>GetUser</servlet-name>
<servlet-class>ajax.GetUser</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>GetUser</servlet-name>
<url-pattern>/GetUser</url-pattern>
</servlet-mapping>

</web-app>

以Java的一个集合类 ArrayList 对象存储的几条数据为一个数据库

伪数据库。。。可以把上面的集合类里面的数据记录当成是从数据库

中取出来的。。。

然后用Ajax 把 list 转换成 xml 文件

然后再用 javascript 解析 xml 文件无刷新动态显示到页面上

祝你早日成功！！！

已赞过 已踩过<

评论收起

侠们figo
2015-09-17 · TA获得超过152个赞

知道小有建树答主

回答量：246

采纳率：50%

帮助的人：91.7万

我也去答题访问个人页

关注

展开全部

局部刷新是ajax异步刷新的一种叫法，异步刷新就是在整个页面没有刷新的情况下，刷新一部分页面，最要用在登陆验证和数据更新方面。

web开发中我们经常会遇到局部刷新页面的需求，以前我经常使用ajax和iframe实现局部刷新，后来做政府的项目，对页面的样式要求比较多，发现使用iframe控制样式什么的很麻烦，所以就采用了新的办法，就是下面我们要说的ajax配合div局部刷新页面，其实很简单，下面我们就看一下这种刷新方式是如何实现的。

jsp页面ajax代码如下：

$("#waitWork").click(function(){
		var url = "请求地址";
		var data = {type:1};
		$.ajax({
			type : "get",
			async : false,  //同步请求
			url : url,
			data : data,
			timeout:1000,
			success:function(dates){
				//alert(dates);
				$("#mainContent").html(dates);//要刷新的div
			},
			error: function() {
               // alert("失败，请稍后再试！");
            }
		});
	});

<div id="mainContent">

注意：后台需要针对div里的信息单独用一个jsp页面，不然就需要自己封装好需要的页面信息返回

参考：http://www.w3school.com.cn/jquery/ajax_ajax.asp

已赞过 已踩过<

评论收起

rybwxn
2009-06-12 · TA获得超过255个赞

知道小有建树答主

回答量：180

采纳率：0%

帮助的人：233万

我也去答题访问个人页

关注

展开全部

你试一下这个，最简单的：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'MyJsp.jsp' starting page</title>
<script type="text/javascript">
//创建Ajax对象
function createXMLHttpRequest()
{
if (window.XMLHttpRequest) {//XMLHttpRequest
xmlHttp = new XMLHttpRequest();//Mozilla,Firefox,Safari
}
else
{
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//Internet Explorer

}
}
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 404) {
alert(xmlHttp.responseText);
}
if(xmlHttp.status==200){
//这里的这个"result"必须是下面的div的id
document.getElementById("result").innerHTML=xmlHttp.responseText;
}
}
}
function fun1(){
//这个是你要提交的那个jsp页面或者servlet
var url="MyJsp.jsp";
createXMLHttpRequest();
xmlHttp.onreadystatechange =handleStateChange;
xmlHttp.open("post", url,true);
xmlHttp.send(null);
}
</script>
</head>

<body>
dfsaf
<input type="submit" onclick="fun1()" value="ok"/><br />
<div id="result"></div>
</body>
</html>

已赞过 已踩过<

评论收起

书乐天0A2
2009-06-12 · TA获得超过722个赞

知道小有建树答主

回答量：137

采纳率：0%

帮助的人：250万

我也去答题访问个人页

关注

展开全部

如果这个数据是从数据库中读取的,那么需要用到AJAX,如果只是随意写的一些内容,那么可以直接使用JavaScript完成

例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function showValue() {
document.getElementById("message").innerHTML = "随便显示内容" ;
}
</script>
</HEAD>

<BODY>
<INPUT TYPE="button" onclick="showValue();" value="显示"> <br>
<div id="message"></div>
</BODY>
</HTML>

已赞过 已踩过<

评论收起

hgd0324
2009-06-12 · TA获得超过1138个赞

知道小有建树答主

回答量：551

采纳率：0%

帮助的人：399万

我也去答题访问个人页

关注

展开全部

如果你只是显示固定的值（文字）的话，那么可以考虑用JavaScript 语言编写代码，用来控制文字的显示与否；

如果是动态的文字加载，那你可以考虑用子框架的形式去操作（iframe ），这样的话，当你点击按钮submit，经过数据处理后，将至显示在你需要显示的地方。

路过~希望可以帮助你~

已赞过 已踩过<

评论收起

更多回答（7）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

超级码客~2025版海量Javascript面试题+笔试题&答案

精编javascript 笔试题Web前端工程师面试#H5，CSS3，JavaScript，Vue，JQuery，Redux，WebpackBootstrap，TypeScript，微信小程序核心题集超3500题，一站式面试服务javascript 笔试题

www.chaojimake.cn广告

同一个jsp页面中 局部刷新问题

您可能关注的内容

其他类似问题

为你推荐：

同一个jsp页面中局部刷新问题