Java Web之Ajax

在之前的学习web前端专栏中已经对Ajax相关知识有过介绍了，不清楚的同学可以看一下这篇博客：从零开始学习WEB前端之数据交互（Ajax）这里就不在赘述了。

但是之前是用PHP简单的搭了个环境，既然现在学习到javaweb了，那我们就使用java的相关知识来完成一次前后端数据交互的流程。

例子很简单，还是一个登录的示例

这里我们就直接用Jquery版的Ajax进行请求了
首先下载Jquery

这里处理json数据依然使用的是Gson

首先我们先来定义个实体类，用于封装返回数据。

LoginResponse
就两个字段，fig和msg

package data;public class LoginResponse {/*状态  0表示成功 否则表示失败*/private String fig;/*信息*/private String msg;public String getFig() {return fig;}public void setFig(String fig) {this.fig = fig;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}
}

LoginServlet
实体类有了，下面我们来创建个servlet处理登录请求，并将结果返回给客户端。这里返回json数据

package servlet;import com.google.gson.Gson;
import data.LoginResponse;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 java.io.IOException;@WebServlet(name = "LoginServlet", urlPatterns = "/login.do")
public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String account = request.getParameter("account");String pwd = request.getParameter("pwd");LoginResponse loginResponse = new LoginResponse();if (account.equals("yzq") && pwd.equals("123456")) {/*返回登录成功*/loginResponse.setFig("0");loginResponse.setMsg("登录成功");} else {loginResponse.setFig("-1");loginResponse.setMsg("登录失败");}/*将实体类转成json*/String result = new Gson().toJson(loginResponse);System.out.println("返回的结果：" + result);response.setCharacterEncoding("utf-8");response.setContentType("application/json;charset=utf-8");/*返回数据*/response.getWriter().write(result);}
}

登录页面

下面我们在登录页面使用Ajax进行请求，并将请求结果显示到div标签中

<%--Created by IntelliJ IDEA.User: yzqDate: 2018/7/30Time: 13:33To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>登录</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script>$(function () {$("#ajaxBtn").on("click", function () {/*调登录*/loginWithAjax()})$("#getBtn").on("click", function () {/*调登录*/loginWiteGet()})$("#postBtn").on("click", function () {/*调登录*/loginWithPost()})})function loginWithAjax() {$.ajax({url: "<%=application.getContextPath()%>/login.do",data: {account: $("input[name=account]").val(), pwd: $("input[name=pwd]").val()},type: "POST",success: function (result) {console.log(result)$("#result").html(result.msg)},beforeSend: function () {console.log("请求发送之前")},error: function () {console.log("失败时调用")}})}function loginWiteGet() {$.get("<%=application.getContextPath()%>/login.do",{account: $("input[name=account]").val(), pwd: $("input[name=pwd]").val()},function (data) {console.log(result)$("#result").html(data.msg)})}function loginWithPost() {$.post("<%=application.getContextPath()%>/login.do",{account: $("input[name=account]").val(), pwd: $("input[name=pwd]").val()},function (data) {console.log(result)$("#result").html(data.msg)})}</script></head>
<body>用户名：<input name="account" type="text"/>
<br>
密码：<input name="pwd" type="text">
<br>
<button id="ajaxBtn">ajax登录</button>
<button id="getBtn">get登录</button>
<button id="postBtn">post登录</button><hr>登录结果：
<div id="result"></div></body>
</html>

运行结果;

demo

下一篇比较重要：

Java Web之过滤器（Filter）

如果你觉得本文对你有帮助，麻烦动动手指顶一下，可以帮助到更多的开发者，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客，谢谢！

Java Web之Ajax相关推荐

java web 利用ajax 异步向后台提交数据
前台界面的js代码实现; <script>$(function(){$("#username").focus(function(){$("error" ...
【Java WEB】AJAX
java web ajax异步刷新页面,ajax自动刷新页面有关问题
当前位置:我的异常网» Java Web开发 » ajax自动刷新页面有关问题 ajax自动刷新页面有关问题 www.myexceptions.net 网友分享于:2013-12-19 浏览:21 ...
jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）
一简介和实现效果这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了 ...
[Java Web]AJAX Axios | 一种结合HTML来取代传统JSP的技术
⭐作者介绍:大二本科网络工程专业在读,持续学习Java,努力输出优质文章 ⭐作者主页:@逐梦苍穹 ⭐所属专栏:Java Web 目录 1.AJAX 1.1.简介 1.2.作用 1.3.同步和异步 1. ...
Java web实验购物网站（IDEA开发环境，JavaScript，JSP，Servlet，jQuery，Ajax，MySql等）——实现购物车
Java web实验购物网站实验要求实验开发工具及使用技术准备工作完整项目目录结构实验结果展示实验步骤小结项目完整代码及数据库.SQL文件自学网站 2021.05.25补充实验要求 ...
名师讲坛——Java Web开发实战经典基础篇（JSP、Servlet、Struts、Ajax）
[书名]<名师讲坛--Java Web开发实战经典基础篇(JSP.Servlet.Struts.Ajax)> [作者]李兴华.王月清 [ISBN]9787302231585 }:YKf: ...
名师讲坛—Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax)
名师讲坛-Java Web开发实战经典基础篇(JSP.Servlet.Struts.Ajax) 基本信息作者: 李兴华王月清出版社:清华大学出版社 ISBN:9787302231585 ...
java web 2.0 下载地址_《征服Ajax Web2.0快速入门与项目实践(Java)》[PDF]
征服Ajax Web2.0快速入门与项目实践(Java) 作者:张桂元贾燕枫姜波基本信息 ·出版社:人民邮电出版社 ·页码:300 页 ·出版日期:2006年 ·ISBN:7115148031 ...

Java Web之Ajax

Java Web之Ajax相关推荐

最新文章

热门文章