servlet+ajax在线生成二维码

最新推荐文章于 2019-04-22 17:40:44 发布

永恒言诺

最新推荐文章于 2019-04-22 17:40:44 发布

阅读量1.2k

点赞数 1

分类专栏： java java细节 java小测试移动开发文章标签： java在线生成二维码 servlet ajax生成二维码二维码在线生成

本文链接：https://blog.csdn.net/weixin_41092717/article/details/81333211

版权

java 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

java细节

11 篇文章 0 订阅

订阅专栏

java小测试

11 篇文章 0 订阅

订阅专栏

前几天博主写了一篇在线生成二维码的文章，因为是在文件上传案例中的基础上写的Demo，所以使用的是Spring+springMVC框架写的。有小朋友说搭建框架太麻烦，所以博主特意把代码摘出来，使用最原始的servlet+ajax实现二维码在线生成不使用任何框架。

很久没写原生的servlet代码感觉有点难受...废话不多说，直接上代码。提醒一下博主用的是idea开发工具

因为是调用第三方在线生成二维码首先我们找到一个在线生成二维码的api接口，因为这样的api接口有许多，这里我提供一个参考链接接口：

http://www.liantu.com/pingtai/

第一步：创建一个web工程项目，项目名字自取也可以和我一样，我的是createQrCode倒入的jar包也是结构图中所示。

第二步：这里我直接将index.jsp页面改了，项目启动直接跳转到index页面，也就是二维码生成页面。

<%--
  Created by IntelliJ IDEA.
  User: YYBJ
  Date: 2018/7/26
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <title>Title</title>
  <script type="text/javascript">
    function getQrCode() {
      var shortUrl = document.getElementById("shortUrl").value;
      console.log(shortUrl)
      $.ajax({
        url:"/DemoQrCode",
        type:"GET",
        cache:false,
        data:{
          shortUrl:shortUrl
        },
        success:function (data) {
          alert(data);
          var ev = eval('(' + data + ')');
          document.getElementById("imgSrc").src=ev.imgSrc;
        }

      })
    }

  </script>
</head>
<body>
<h2>生成二维码</h2>
<form >
  <table>
    <tr>
      <td>请输入链接:</td>
      <td><input type="text" name="shortUrl" id="shortUrl" value="${QrCode.shortUrl}"></td>
    </tr>
    <tr>
      <img id="imgSrc"  src="${QrCode.imgSrc}" />

    </tr>
    <tr>
      <td><input type="button" value="生成二维码" onclick="getQrCode()"></td>
    </tr>
  </table>
</form>
</body>
</html>

注意：ajax的写法：后台返回的是json数据我们需要将json数据赋值到<img>标签中，这里怎么取值怎么赋值的建议你了解一下。这里博主自己写的时候也有点懵。因为没使用框架，数据的取出还是有点麻烦。

第三步：修改web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">


    <servlet>
        <servlet-name>DemoQrCode</servlet-name>
        <servlet-class>cn.yybj.action.DemoQrCode</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>DemoQrCode</servlet-name>
        <url-pattern>/DemoQrCode</url-pattern>
    </servlet-mapping>
</web-app>

第四步：创建实体类和controller类

实体类：

package cn.yybj.action;

/**
 * Created by YYBJ on 2018/8/1.
 * ZCL
 */
public class QrCode {

    private String shorUrl;
    private String imgSrc;

    public String getShorUrl() {
        return shorUrl;
    }

    public void setShorUrl(String shorUrl) {
        this.shorUrl = shorUrl;
    }

    public String getImgSrc() {
        return imgSrc;
    }

    public void setImgSrc(String imgSrc) {
        this.imgSrc = imgSrc;
    }


    @Override
    public String toString() {
        return "QrCode{" +
                "shorUrl='" + shorUrl + '\'' +
                ", imgSrc='" + imgSrc + '\'' +
                '}';
    }
}

为了方便实体类和controller类就放到一起了。

package cn.yybj.action;

import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by YYBJ on 2018/8/1.
 * ZCL
 */
public class DemoQrCode extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        System.out.println("================");
        //获取请求参数
        String shortUrl = req.getParameter("shortUrl");
        System.out.println(shortUrl);
        String imgSrc = req.getParameter("imgSrc");
        //这里就是第三方api的调用和拼接了
        imgSrc="http://qr.liantu.com/api.php?text="+shortUrl;
        QrCode qrCode = new QrCode();
        //qrCode.setShorUrl(shortUrl);
        qrCode.setImgSrc(imgSrc);
        System.out.println(imgSrc);
        Gson gson = new Gson();
        String json = gson.toJson(qrCode);
        resp.getWriter().print(json);
    }

    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doPost(req, resp);
    }
}

第五步：配置Tomcat，这个没什么没什么可说的，主要是将项目放入Tomcat启动就行了。

第六步：启动测试：直接跳转到index页面也就是如下页面。若跳转不到看看Tomcat路径和action的请求及servlet路径是否正确