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: yzq
  Date: 2018/7/30
  Time: 13:33
  To 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

OpenVINO计算机视觉—实例实战

11-02
手把手讲授如何搭建成功OpenVINO框架,并且使用预训练模型快速开发超分辨率、道路分割、汽车识别、人脸识别、人体姿态和行人车辆分析。得益于OpenVINO框架的强大能力,这些例子都能够基于CPU达到实时帧率。 课程的亮点在于在调通Demo的基础上更进一步:一是在讲Demo的时候,对相关领域问题进行分析(比如介绍什么是超分辨率,有什么作用)、预训练模型的来龙去脉(来自那篇论文,用什么训练的)、如何去查看不同模型的输入输出参数、如何编写对应的接口参数进行详细讲解;二是基本上对所有的代码进行重构,也就是能够让例子独立出来,并且给出了带有较详细注释的代码;三是注重实际运用,将Demo进一步和实时视频处理框架融合,形成能够独立运行的程序,方便模型落地部署;四是重难点突出、注重总结归纳,对OpenVINO基本框架,特别是能够提高视频处理速度的异步机制和能够直接部署解决实际问题的骨骼模型着重讲解,帮助学习理解;五是整个课程准备精细,每一课都避免千篇一律,前一课有对后一课的预告,后一课有对前一课的难点回顾,避免学习过程中出现突兀;六是在适当的时候拓展衍生,不仅讲OpenVINO解决图像处理问题,而且还补充图像处理的软硬选择、如何在手机上开发图像处理程序等内容,帮助拓展视野,增强对行业现状的了解。 基本提纲: 1、课程综述、环境配置 2、OpenVINO范例-超分辨率(super_resolution_demo) 3、OpenVINO范例-道路分割(segmentation_demo) 4、OpenVINO范例-汽车识别(security_barrier_camera_demo) 5、OpenVINO范例-人脸识别(interactive_face_detection_demo) 6、OpenVINO范例-人体姿态分析(human_pose_estimation_demo) 7、OpenVINO范例-行人车辆分析(pedestrian_tracker_demo) 8、NCS和GOMFCTEMPLATE 9、课程小结,资源分享
©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值