servlet+ajax在线生成二维码

11 篇文章 0 订阅
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路径是否正确

到此测试完成希望能帮助到你;

版权声明:本文为博主原创文章,转载请说明转载来源。https://blog.csdn.net/weixin_41092717/article/details/81333211

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值