前言：
今天朋友们对“h5 ajax”大体比较注意，同学们都需要分析一些“h5 ajax”的相关资讯。那么小编在网摘上汇集了一些对于“h5 ajax””的相关知识，希望姐妹们能喜欢，小伙伴们一起来了解一下吧！简述
旧项目集成阿里云滑动验证码（web和H5方式）
适用于servlet和HTML项目，VUE + springboot请看另一篇文档
前情提示
系统：
一说部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行如果无法下载、无法复制，请评论后留言即可。收到消息后会第一时间回复～知识付费，1对1技术支持：
有账号的朋友，可以点个赞或者评论两句哦，评论后会获得积分奖励～
文档
控制台：
接入指南：
H5代码
核心要有一个DOM元素<div id="captcha-element"></div>，
先引入JS
JS代码可以直接复制，其中中文标注的，需要结合业务修改即可。其他都是固定的
如下示例代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"> <meta name="referrer" content="no-referrer"> <title>HJM</title> <style type=""> html, body {width:100%;height:100%;margin:auto;overflow: hidden;} </style> <!-- // 1.集成主JS --> <script type="text/javascript" src=";> </script> </head> <body> <div id="space-semantic" style="width: 100%;text-align: center;"> <div id="embed-wrapper"> <h2>弹出式</h2> <div class="embed-wrapper"> <div> <label>用户名：</label> <input id="username-embed" class="biz-input"> </div> <div> <label>密码：</label> <input id="password-embed" type="password" class="biz-input"> </div> <br /> <!-- 预留的验证码页面元素，用于配置初始化函数中的element参数 --> <div id="captcha-element"></div> <button id="loginbtn2" style="height: 40px;width: 120px;" class="login-btn">登录</button> <br /> <br /> <br /> <input id="loginbtn1" style="height: 40px;width: 120px;" type="submit" value="登录2" /> </div> </div> </div> <script src="; type="application/javascript"></script> <script> let captcha; // 弹出式 initAliyunCaptcha({ SceneId: '1kgfaz2o', // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID prefix: '1muies', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标 mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改 element: '#captcha-element', //页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。 button: '#loginbtn1', // 触发验证码弹窗的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值 captchaVerifyCallback: captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改 onBizResultCallback: onBizResultCallback, // 业务请求结果回调函数，无需修改 getInstance: getInstance, // 绑定验证码实例函数，无需修改 slideStyle: { width: 360, height: 40, }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px language: 'cn', // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en） }); // 绑定验证码实例函数。该函数为固定写法，无需修改 function getInstance(instance) { captcha = instance; } // 业务请求(带验证码校验)回调函数 /** * @name captchaVerifyCallback * @function * 请求参数：由验证码脚本回调的验证参数，不需要做任何处理，直接传给服务端即可 * @params {string} captchaVerifyParam * 返回参数：字段名固定，captchaResult为必选；如无业务验证场景时，bizResult为可选 * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}} */ async function captchaVerifyCallback(captchaVerifyParam) { var pptdata = {}; pptdata.captchaVerifyParam = captchaVerifyParam; pptdata.yourBizParam = "你以前的登录参数"; try { const res = await $.ajax({ type: "POST", contentType: "application/json;charset=UTF-8", // 这里改成登录接口，登录接口先校验文档中的main方法 url: ";, data: JSON.stringify(pptdata), }); console.log(res); const verifyResult = { captchaResult: res.data.captchaVerifyResult, bizResult: true, // 业务系统校验账号密码等 }; return verifyResult; } catch (error) { const verifyResult = { captchaResult: false, bizResult: false, }; return verifyResult; } } // 业务请求验证结果回调函数 function onBizResultCallback(bizResult) { if (bizResult === true) { // 如果业务验证通过，跳转到对应页面 // window.location.href = '验证通过，跳转首页' alert('业务验证通过！跳转首页'); } else { // 如果业务验证不通过，给出不通过提示。此处不通过提示为业务验证不通过！ alert('业务验证不通过！'); } } </script> </body></html>后端接入引入JAR，调用HTTP即可。可以把以下代码放到登录接口中，提前进行请求校验
package com.aliyun.sample;import com.aliyun.tea.*;import com.aliyun.captcha20230305.models.*;import com.aliyun.teaopenapi.models.*;public class Sample { public static void main(String[] args_) throws Exception { java.util.List<String> args = java.util.Arrays.asList(args_); // ====================== 1. 初始化配置 ====================== Config config = new Config(); config.accessKeyId = "d"; config.accessKeySecret = ""; //设置请求地址 config.endpoint = "captcha.cn-shanghai.aliyuncs.com"; // 设置连接超时为5000毫秒 config.connectTimeout = 5000; // 设置读超时为5000毫秒 config.readTimeout = 5000; // ====================== 2. 初始化客户端（实际生产代码中建议复用client） ====================== com.aliyun.captcha20230305.Client client = new com.aliyun.captcha20230305.Client(config); // 创建APi请求 VerifyCaptchaRequest request = new VerifyCaptchaRequest(); // 前端传来的验证参数 CaptchaVerifyParam request.captchaVerifyParam = "前端传来的验证参数 CaptchaVerifyParam"; // ====================== 3. 发起请求） ====================== try { VerifyCaptchaResponse resp = client.verifyCaptcha(request); // 建议使用您系统中的日志组件，打印返回 // 获取验证码验证结果（请注意判空），将结果返回给前端。出现异常建议认为验证通过，优先保证业务可用，然后尽快排查异常原因。 Boolean captchaVerifyResult = resp.body.result.verifyResult; System.out.println(captchaVerifyResult); } catch (TeaException error) { // 建议使用您系统中的日志组件，打印异常 // 出现异常建议认为验证通过，优先保证业务可用，然后尽快排查异常原因。 Boolean captchaVerifyResult = true; } catch (Exception _error) { TeaException error = new TeaException(_error.getMessage(), _error); // 建议使用您系统中的日志组件，打印异常 // 出现异常建议认为验证通过，优先保证业务可用，然后尽快排查异常原因。 Boolean captchaVerifyResult = true; } }}JAR下载注意版本冲突等。
阿里云滑动验证码JAR.zip: (访问密码: 4760)
更多
接入指南：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #h5 ajax
