ps:mockjs在进行相同的双数次请求的时候,会出现请求404的状况,希望有大佬帮解决下

首先创建dom

<img id='bbn' src="" alt="图图">
<button id="but">asdsa</button>

在js中先写好mock

Mock.mock(/query/g,function(option){//拦截query请求
                return Mock.mock({
                        imgUrl: Mock.Random.dataImage('50x20', Mock.mock({'regexp': /\w{4}/}).regexp)
                });
});

在写点击事件

$('#but').on('click',function(){
           $.get('query',function(data){
                 var data = JSON.parse(data);
                  $('#bbn').attr('src',data.imgUrl);
           });
});

让初始化就有一个

$.get('query',function(data){
  var data = JSON.parse(data);
  $('#bbn').attr('src',data.imgUrl);
});

前端mockjs模拟图片验证码的更多相关文章

  1. 如何在vue-cli项目中结合mockjs模拟假数据

    1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...

  2. Android-简单的图片验证码

    Android-图片验证码生成1.为啥要验证码?图片验证码在网络中使用的是比较普遍的.一般都是用来防止恶意破解密码.刷票.论坛灌水.刷页等.2.怎样的验证码比较好?验证码的获取方式无非就两种,一种是后 ...

  3. 从session实现机制分析模拟请求验证码的可行性(转)

    悲剧了,发现写完这篇blog没有配上这个格调超高的标题.   1.0问题背景 现在要实现一个带验证码网站的的自动登陆功能.验证码识别过程不再这篇文章的讨论之中.(之后有篇文章我会详细的总结验证码的识别 ...

  4. WebSite---前台系统图片验证码心得

    背景: 因为移动端APP和Msite手机注册发送短信验证码没有添加图片验证码功能.公司的短信接口被恶意刷取.所以我们就觉得在移动端添加一个图片验证码功能.分享一下大体实现方式思路.PS demo是自己 ...

  5. 纯JS实现图片验证码功能并兼容IE6-8

    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...

  6. 基于spring mvc的图片验证码实现

    本文实现基于spring mvc的图片验证码,分后台代码和前端页面的展现以及验证码的验证. 首看后台实现代码: @RequestMapping({"authCode"}) publ ...

  7. SpringBoot + Spring Security 学习笔记(三)实现图片验证码认证

    整体实现逻辑 前端在登录页面时,自动从后台获取最新的验证码图片 服务器接收获取生成验证码请求,生成验证码和对应的图片,图片响应回前端,验证码保存一份到服务器的 session 中 前端用户登录时携带当 ...

  8. 用Java实现图片验证码功能

    一.什么是图片验证码? 可以参考下面这张图: 我们在一些网站注册的时候,经常需要填写以上图片的信息. 1.图片生成实体类: package com.hexianwei.graphic; import ...

  9. 潭州课堂25班:Ph201805201 django 项目 第九课 图片验证码前台实现,判断用户是否注册功能实现 (课堂笔记)

    u胎代码实现 : 针对每一个 app 写个 js 脚本, 先给 users 的 app 应用创建个 js:在指定目录下的 js 文件夹下,创建 users 文件夹,下创建 suth.js ,图片验证 ...

随机推荐

  1. 关于UEditor的使用配置(图片上传配置)

    接到新需求,需要在平台上使用富文本编辑器,我这次选择了百度的UEditor 在官网上下载l.net版本的1.4.3开发版本 http://ueditor.baidu.com/website/downl ...

  2. thrift 的required、optional探究

    原因 经常使用thrift来编写rpc通信,但是对下面两个问题还是有些疑惑 thrift 的required.optional和不写有什么区别 optional不设置isset的话被传输后值? 实验 ...

  3. vue 点击切换图标

    <div @click="showImg" class="showSearch"> <img class="header_img&q ...

  4. CSS文本垂直居中显示

    <style> .sty1 { width: 300px; height: 200px; background-color: black; text-align: center; colo ...

  5. ajax 实战使用

    注意ajax 必须放在script脚本中使用 ajax用于前端朝后端提交数据,并且后端函数处理好结果返回给success函数作为回调函数给前端,前端拿到后端传来的值,比如code==0 来做相应的前端 ...

  6. 二分+贪心——cf1251D

    二分的时候要特别注意一下下界L #include<bits/stdc++.h> using namespace std; #define ll long long #define N 20 ...

  7. 线段树维护线性基并——17西安icpc a

    #include<bits/stdc++.h> using namespace std; #define N 10005 int a[N],n,k,q; struct LB{ ]; LB( ...

  8. Linux中断机制

    1.中断概念 中断是指在CPU正常运行期间,由于内外部事件或由程序预先安排的事件引起的CPU暂时停止正在运行的程序,转而为该内部或外部事件或预先安排的事件服务的程序中去,服务完毕后再返回去继续运行被暂 ...

  9. 牛客 最大值减去最小值小于或等于 num 的子数组数量

    题目链接:https://www.nowcoder.com/practice/5fe02eb175974e18b9a546812a17428e?tpId=101&tqId=33086& ...

  10. PAT_A1124#Raffle for Weibo Followers

    Source: PAT A1124 Raffle for Weibo Followers (20 分) Description: John got a full mark on PAT. He was ...