《JavaWeb---利用JQuery实现页面无刷新动态改变页面数据》

来源：互联网发布：泰勒展开矩阵形式编辑：程序博客网时间：2024/05/16 19:52

[html] view plaincopyprint?

<%@ 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>AJAX简单示例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
<input type="text"" id="inputext"/>
<input type="button" value="提交" onclick="verify()"/><br/>
<div id="div"></div>
</body>
</html>

<%@ 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>AJAX简单示例</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="jslib/jquery.js"></script>  <script type="text/javascript" src="jslib/verify.js"></script>   </head>    <body>    <!-- 此处无需添加表单，利用 JQuery向服务器提交数据。--><input type="text"" id="inputext"/><input type="button" value="提交" onclick="verify()"/><br/><!-- 预留空间用于更新数据 --><div id="div"></div>    </body></html>

[javascript] view plaincopyprint?

//JavaScript
function verify(){
//用JQuery语法，利用id得到对应的JQuery对象。
var jqObj = $("#inputext");
//获取对象中的值。
var value = jqObj.val();
//使用get的方式将数据传的服务器，callback是服务器端数据返回后运行的回调函数名
$.get("servlet/Test?inputext=" + value,null,callback);
}
//定义回调函数，data用于接收服务器端返回的数据
function callback(data){
//得到页面中的div对象
var divobj = $("#div");
//将返回的数据更新到div中
divobj.html(data);
}

//JavaScriptfunction verify(){//用JQuery语法，利用id得到对应的JQuery对象。var jqObj = $("#inputext");//获取对象中的值。var value = jqObj.val();//使用get的方式将数据传的服务器，callback是服务器端数据返回后运行的回调函数名$.get("servlet/Test?inputext=" + value,null,callback);}//定义回调函数，data用于接收服务器端返回的数据function callback(data){//得到页面中的div对象var divobj = $("#div");//将返回的数据更新到div中divobj.html(data);}

[java] view plaincopyprint?

package com.fenghuo.test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Testextends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String data = request.getParameter("inputext");
//此处只是将数据做了简单的处理
if(data == null || data.equals("")){
out.write("未得到数据或数据为空！");
}else{
out.write("已接收数据数据："+data);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}

package com.fenghuo.test;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Test extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();String data = request.getParameter("inputext");//此处只是将数据做了简单的处理if(data == null || data.equals("")){out.write("未得到数据或数据为空！");}else{out.write("已接收数据数据："+data);}}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}}

0 0