Servlet和AJAX实现不跳转页面交换数据

JAVA/Web/大数据 同时被 2 个专栏收录
36 篇文章 0 订阅
6 篇文章 0 订阅

前言:今天写了一个简单的作业题答案搜索的网站,后端用的Servlet与mysql进行查询,然后将数据通过request.getRequestDispatcher(url).forward(request, response)实现数据交互,但是问题来了。

如果我用前端jsp的话无法实现在提交表单后不跳转或者无痕迹的情况下将答案显示出来,那么怎么办呢?

通过百度我找到了一个方法:用ajax实现前端与后端的异步交互。问题又来了,我没接触过axaj啊,怎么办呢?现学现卖吧!

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

 

一、目录结构

二、后端Servlet部分,很简单

package com;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.mysql.cj.xdevapi.JsonArray;
import net.sf.json.JSON;
import net.sf.json.JSONArray;


@WebServlet("/query")
public class findQuestionServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
		String question = request.getParameter("question");
		//System.out.println(question);
		connectDB conn = new connectDB(question);
		try {
			List<Tuple> data = conn.getData();
			
			//将data以json格式发送到前端,发送之前需要对数据进行编码,否则前端AJAX会出现中文乱码
			response.setCharacterEncoding("utf-8");
			response.getWriter().write(JSONArray.fromObject(data).toString());
			
			
		} catch (ClassNotFoundException | SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

三、前端html中AJAX部分,真的是让我痛不欲生

<!DOCTYPE html>
<html>
<head>
<title>
	江冷易水寒
</title>
<meta charset="UTF-8">
<script type="text/javascript">
	//设置全局变量xmlhttp
	var xmlhttp;
	//创建xmlhttp对象
	function createXMLHttp(){
		var xmlhttp;
	    if (window.XMLHttpRequest) {
	        xmlhttp = new XMLHttpRequest();
	      }

	    return xmlhttp;
	}
	function callback(){
		//4代表完成 200代表服务器响应成功
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			 //交互成功获得响应的数据,是String格式
			var jsonData = xmlhttp.responseText;
			//解析获得的数据,解析后的json变量是一个(question,answer)的列表
			var json = eval("("+ jsonData +")");
			//遍历列表
			for(var i=0;i<json.length;i++){
				document.getElementById("result").innerHTML +=(i+1 + ".&nbsp&nbsp" + json[i].question + "&nbsp&nbsp&nbsp&nbsp答案: " + json[i].answer + "<br>");
			}
			//document.getElementById("result").innerHTML=json[0].question
			//document.getElementById("result").innerHTML=json.answer
		}	
	}

	//设置全局变量xmlhttp
	function sendQuestion(){
		//得到输入框中的内容
		var question = document.getElementById("id_1");
		//每次触发事件时先清空上次的页面
		if(question.value == ""){
			 document.getElementById("result").innerHTML="<font color='#FF0000'>无输入内容</font><br> "
			 return
		}
		else{
            //每次都先清空上一次的页面
			document.getElementById("result").innerHTML="";
			//向服务器发送内容,用到XmlHttp对象
			xmlhttp = createXMLHttp();
			//给服务器发送数据,传中文需要用encodeURI()编码,要不然服务器端接收不到
			var url = "query?question=" + encodeURI(question=question.value)
			xmlhttp.open("GET",url,true);
		    //xmlHttp绑定回调方法,这个方法会在xmlHttp状态改变的时候调用,xmlHttp状态有0-4,
		    //我们只关心4,4表示完成
			xmlhttp.onreadystatechange=callback;
			xmlhttp.send();
		}
	}
	
</script>
</head>
<body>

	请输入问题: <input type="text" id="id_1" onkeyup="sendQuestion()" />
	<div id="result"></div>
	
</body>
</html>

 

弄了一整天,终于弄完了~ 痛并快乐着,之前一点没学过JS和AJAX,一天下来后全会了。。。

效果图:

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值