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

最新推荐文章于 2022-12-30 09:02:46 发布

网安小明

最新推荐文章于 2022-12-30 09:02:46 发布

阅读量7.2k

点赞数

分类专栏： Java Web ajax 文章标签： jquery callback 服务器 string path html

本文链接：https://blog.csdn.net/w695050167/article/details/8038399

版权

Java Web 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

<%@ 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="提交" οnclick="verify()"/><br/>
	<!-- 预留空间用于更新数据 -->
	<div id="div"></div>
  
  </body>
</html>

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

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

}