js如何防止ajax重复提交表单 很多开发者在做表单提交数据到后台的时候，会出现多提交一次，多一条数据的情况，这种原因的是因为服务端未能及时响应结果(网络延迟，并发排队等因素)，导致前端页面没有及时刷新，用户有机会多次提交表单如果提交对象为按钮的话，可以对按钮设置disabled，此办法适应于按钮提交，此种方法简单粗暴，也是很多人用的办法：$(".sub").attr('disabled',true)//在按钮提交之后和AJAX提交之前将按钮设置为禁用 $.ajax({ url:'/post.php' data:{a:1,b,1} success:function(){ $(".sub").attr('disabled',false)//在提交成功之后重新启用该按钮 }, error: function(){ $(".sub").attr('disabled',false)//即使AJAX失败也需要将按钮设置为可用状态，因为有可能是网络问题导致的失败，所以需要将按钮设置为可用 } })

如何使用JavaScript获取扫码枪扫码数据，执行相应的操作 扫码枪在日常生活中，经常可以看到，比较多的就是超市，网页中我们需要用获取扫码枪的值，就需要用到JavaScript来获取，后再执行操作。JavaScript获取扫码枪数据，扫码枪相当于键盘输入设备，输入一连串数字后加一个enter键。以下教大家怎么获取扫码枪的值：1、放置文本框：首先放置文本输入框，用于接收扫码枪赋值（如果不想显示输入框，可以使用样式将其隐藏即可）<input type="text" class="codevalue" >2、聚焦文本框：设置定时聚焦文本框，每隔半秒执行一次聚焦，防止文本框失去焦点setInterval(function() { $('.codevalue').focus() console.log('连接成功') }, 500); //1000毫秒等于1秒钟3、文本框赋值：获取扫码枪的值，并赋值给文本框var char = ""; //记录扫描枪输入的内容 var lastTime=null;//上次输入的时间 var nextTime=null;//这次输入的时间 var lastCode=null;//上次输入的键值（接收到的为ASCII值） var nextCode=null;//这次输入的键值（接收到的为ASCII值） $(document).keydown(function(event){ nextTime = new Date().getTime();//获取当前键入的时间 //判断是否输入了回车按钮，并确认是扫描枪键入的值 if (event.keyCode === 13 && char !== "" && nextTime - lastTime <= 30){ //把监听到的数据显示在我的文本框上 $(".codevalue").val(char); console.log('获取到值1--' +char) //清空数值，以便下一次扫描 char = ""; lastCode = null; lastTime = null; }else { //获取键入的键值 nextCode = event.keyCode; //如果是第一个字母你可以进行一些代码增强，我这里并没有处理，直接转换了 if(lastCode == null && lastTime == null){ //初始字母 char = String.fromCharCode(nextCode); //写入你要增强的代码。。。 // console.log('获取到值2--' +char) //判断是否是扫描枪键入的值 }else if(lastCode != null&&lastTime!= null && nextTime - lastTime <= 30){ //键入的值为ASCII码，要获取对应得值，需要转换一下 char += String.fromCharCode(nextCode);//存到char中，拼接上次的结果 } else{ //判断为手动输入，不做任何处理，数据保持为null即可 // alert("suck"); char = ""; lastTime=null; nextTime=null; lastCode=null; nextCode=null; } //lastCode、lastTime为中间变量，存储数据，让nextCode与nextTime可以存新数据 //nextCode与nextTime要存储新键入按钮的信息 lastCode = nextCode; lastTime = nextTime; } })4、执行操作：监听文本的值，执行后置操作$('.codevalue').change(function () { //获取选中下拉框的属性值 let val = $('.codevalue').val(); $('.codevalue').focus() //这里写逻辑代码 })这就是简单的获取扫码枪值的方法，供大家参考。

JavaScript点击按钮或F11键盘实现全屏以及判断是否是全屏 有时候我们做一些网页活动，需要用到全屏，我们可以使用JavaScript点击按钮或F11键盘实现全屏以及判断是否是全屏1、点击按钮实现全屏<script> // 全屏显示 $(".translate").click(function(){ document.documentElement.requestFullscreen() $('.contron').hide(); }) </script>2、判断是否是全屏，用于执行后续操作<script> /** * @description: 检测有没有元素处于全屏状态 * @return false: 当前没有元素在全屏状态 * @return true: 有元素在全屏状态 */ function isEleFullScreen() { const fullScreenEle = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; if (fullScreenEle === null) { return false; } else { return true; } }; </script>3、监听全屏事件，判断元素是否隐藏<script> //监听退出全屏事件 window.onresize = function() { // console.log(isEleFullScreen()) if(isEleFullScreen()==true){ $('.contron').hide(); }else{ $('.contron').show(); } } </script>4、监听用户按下键盘F11键，阻止默认行为，执行全屏// 监听f11键 $(document).keydown(function(event) { if (event.which == 122) { // 122是F1键的键码 event.preventDefault(); // 阻止默认行为 // 在此处添加您的代码以响应F11键事件 document.documentElement.requestFullscreen() //全屏 $('.contron').hide(); } });这里默认打开网页是有全屏按钮的，点击全屏按钮，会自动隐藏全屏按钮，按下键盘全屏快捷按钮，实现全屏，点击ESC按钮或者F11退出全屏，显示全屏按钮。

WordPress 使用 WP-CLI 批量更换域名 本文将指导如何在 Debian 11 和 Ubuntu 20.04 下 WP-CLI 更换 WordPress 域名。PS：本文同时适用于任意 Linux 系统，请自行承担使用风险前提背景有时候我们需要给 WordPress 更换域名，大多数网上的教程是要你从 phpMyAdmin 提交 SQL 语句，而且大多数教程要你修改的表就两个，实际上有三个。对于本站的读者来说，我们都有 root 权限了，不需要这货，此时我们直接拿出大杀器，WordPress 官方的 WP-CLI 工具。安装 WP-CLI按照官方教程，直接安装：wget -O wp-cli.phar https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar chmod +x wp-cli.phar sudo mv wp-cli.phar /usr/local/bin/wp 此时即可通过 wp --info 命令查看 WP-CLI 信息：root@wordpress ~ # wp --info OS: Linux 5.10.0-11-cloud-amd64 #1 SMP Debian 5.10.92-2 (2022-02-28) x86_64 Shell: /usr/sbin/nologin PHP binary: /usr/bin/php8.1 PHP version: 8.1.3 php.ini used: /etc/php/8.1/cli/php.ini MySQL binary: /usr/bin/mysql MySQL version: mysql Ver 15.1 Distrib 10.7.3-MariaDB, for debian-linux-gnu (x86_64) using readline EditLine wrapper SQL modes: WP-CLI root dir: phar://wp-cli.phar/vendor/wp-cli/wp-cli WP-CLI vendor dir: phar://wp-cli.phar/vendor WP_CLI phar path: /root WP-CLI packages dir: WP-CLI global config: WP-CLI project config: WP-CLI version: 2.6.0 批量替换 WordPress 域名首先，按照本站的 LEMP 或 LAMP 教程，复制一份 Nginx 或 Apache 的配置，让其同时生效新旧域名，记得 SSL 证书也需要更新。然后，进入 WordPress 的安装目录，假设目录为 /var/www/example.com 旧的 URL 为 https://old.example.com，需要替换的新的 URL 为 https://new.example.com：cd /var/www/example.com sudo -u www-data wp search-replace 'https://old.example.com' 'https://new.example.com' --dry-run 此时并不会真正施行替换命令，因为我们加了 --dry-run 参数，你可以看到需要替换的条目数是否和预估的匹配：root@wordpress /var/www/example.com # sudo -u www-data wp search-replace 'https://old.example.com' 'https://new.example.com' --dry-run +------------------+-----------------------+--------------+------+ | Table | Column | Replacements | Type | +------------------+-----------------------+--------------+------+ | wp_commentmeta | meta_key | 0 | SQL | | wp_commentmeta | meta_value | 0 | SQL | | wp_comments | comment_author | 0 | SQL | | wp_comments | comment_author_email | 0 | SQL | | wp_comments | comment_author_url | 0 | SQL | | wp_comments | comment_author_IP | 0 | SQL | | wp_comments | comment_content | 15 | SQL | | wp_comments | comment_approved | 0 | SQL | | wp_comments | comment_agent | 0 | SQL | | wp_comments | comment_type | 0 | SQL | | wp_links | link_url | 0 | SQL | | wp_links | link_name | 0 | SQL | | wp_links | link_image | 0 | SQL | | wp_links | link_target | 0 | SQL | | wp_links | link_description | 0 | SQL | | wp_links | link_visible | 0 | SQL | | wp_links | link_rel | 0 | SQL | | wp_links | link_notes | 0 | SQL | | wp_links | link_rss | 0 | SQL | | wp_options | option_name | 0 | SQL | | wp_options | option_value | 2 | PHP | | wp_options | autoload | 0 | SQL | | wp_postmeta | meta_key | 0 | SQL | | wp_postmeta | meta_value | 1 | PHP | | wp_posts | post_content | 331 | SQL | | wp_posts | post_title | 0 | SQL | | wp_posts | post_excerpt | 0 | SQL | | wp_posts | post_status | 0 | SQL | | wp_posts | comment_status | 0 | SQL | | wp_posts | ping_status | 0 | SQL | | wp_posts | post_password | 0 | SQL | | wp_posts | post_name | 0 | SQL | | wp_posts | to_ping | 0 | SQL | | wp_posts | pinged | 0 | SQL | | wp_posts | post_content_filtered | 0 | SQL | | wp_posts | guid | 19315 | SQL | | wp_posts | post_type | 0 | SQL | | wp_posts | post_mime_type | 0 | SQL | | wp_term_taxonomy | taxonomy | 0 | SQL | | wp_term_taxonomy | description | 0 | SQL | | wp_termmeta | meta_key | 0 | SQL | | wp_termmeta | meta_value | 0 | SQL | | wp_terms | name | 0 | SQL | | wp_terms | slug | 0 | SQL | | wp_usermeta | meta_key | 0 | SQL | | wp_usermeta | meta_value | 0 | PHP | | wp_users | user_login | 0 | SQL | | wp_users | user_nicename | 0 | SQL | | wp_users | user_email | 0 | SQL | | wp_users | user_url | 0 | SQL | | wp_users | user_activation_key | 0 | SQL | | wp_users | display_name | 0 | SQL | +------------------+-----------------------+--------------+------+ Success: 19664 replacements to be made. 我们可以看到，基本上就 comment_content，post_content 和 guid 需要替换，没有问题的话就直接执行：cd /var/www/example.com sudo -u www-data wp search-replace 'https://old.example.com' 'https://new.example.com' 执行完成后会出现类似 Success: Made 19664 replacements. 的提示。注意，如果之前没有开启过 HTTPS，那么你可能需要使用 http://old.example.com 来替换，建议执行两次，不推荐直接执行替换 old.example.com。修改 wp-config.php我们也可以打开 wp-config.php，加入下面两行代码来完成新的域名替换：define('WP_HOME','https://new.example.com/'); define('WP_SITEURL','https://new.example.com/'); 修改 WordPress 后台设置我们也可以进入 WordPress 后台，在常规设置里更换新的域名，进入 https://new.example.com/wp-admin/options-general.php 然后更换 WordPress 地址（URL） 和 站点地址（URL）这两种方法治标不治本，仅对新的文章参数生效，旧的文章和评论地址里都是旧域名，所以我们还是推荐使用 WP-CLI 直接替换新的域名。最后别忘了更新 Nginx 或 Apache 配置，让旧的域名跳转到新的域名：Nginx 配置如下server_name old.example.com; return 301 https://new.example.com$request_uri; Apache 配置如下RewriteEngine On RewriteCond %{HTTP_HOST} ^old.example.com[NC] RewriteRule ^(.*)$ https://new.example.com$1[R=301,L]

Docker 安装 Plausible Analytics 自建网站统计 本文将指导使用 Docker 安装 Plausible Analytics 自建网站统计。PS：本文同时适用于任何可安装 Docker 的 Linux 发行版。为什么要自建网站统计？原因很简单，自己网站的数据当然要自己保管，你希望你网站的数据都被第三方卖给 “所谓的” 大数据分析公司吗？Plausible Analytics 是一款以隐私保护著称的网站统计软件，经过几个月的试用，基本可以满足所有的需求，可以取代商业化的 Google Analytics 等产品。安装 Docker 和 Docker ComposeDebian 和 Ubuntu 系统请参考本站教程。其他 Linux 系统可以使用 Docker 官方的脚本安装 Docker 和 Docker Compose：curl -fsSL https://get.docker.com -o get-docker.sh sh get-docker.sh 安装 Plausible Analytics建议安装在 /opt/plausible 目录：mkdir -p /opt/plausible cd /opt/plausible 首先，我们需要建立一个 docker-compose.yaml 文件，请按照实际需求修改参数：services: mail: image: bytemark/smtp restart: always plausible_db: image: postgres:16-alpine volumes: - db-data:/var/lib/postgresql/data environment: - POSTGRES_PASSWORD=postgres restart: always plausible_events_db: image: clickhouse/clickhouse-server:24.3.3.102-alpine volumes: - event-data:/var/lib/clickhouse - event-logs:/var/log/clickhouse-server - ./clickhouse/clickhouse-config.xml:/etc/clickhouse-server/config.d/logging.xml:ro - ./clickhouse/clickhouse-user-config.xml:/etc/clickhouse-server/users.d/logging.xml:ro ulimits: nofile: soft: 262144 hard: 262144 restart: always plausible: image: ghcr.io/plausible/community-edition command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && /entrypoint.sh run" depends_on: - plausible_db - plausible_events_db - mail - geoip volumes: - ./geoip:/geoip:ro ports: - 127.0.0.1:8000:8000 env_file: - plausible-conf.env restart: always geoip: image: maxmindinc/geoipupdate env_file: - geoip.env volumes: - ./geoip:/usr/share/GeoIP volumes: db-data: driver: local event-data: driver: local geoip: driver: local 然后我们在相同目录建立一个 geoip 的文件夹和 plausible-conf.env 的文件：mkdir -p geoip touch plausible-conf.env touch geoip.env 修改 plausible-conf.env，按照官网的教程进行配置，假设你的网址是 https://stat.example.com/，举例如下：ADMIN_USER_EMAIL=管理员邮箱 ADMIN_USER_NAME=管理员用户名 ADMIN_USER_PWD=管理员密码 BASE_URL=https://stat.example.com/ SECRET_KEY_BASE=随机 64 个字符 TOTP_VAULT_KEY=随机 32 个字符 MAILER_EMAIL=网站通知邮箱 SMTP_HOST_ADDR=SMTP 主机名 SMTP_HOST_PORT=SMTP 端口 SMTP_USER_NAME=SMTP 用户名 SMTP_USER_PWD=SMTP 密码 DISABLE_REGISTRATION=true GEOLITE2_COUNTRY_DB=/geoip/GeoLite2-Country.mmdb SECRET_KEY_BASE 需要一串 64 位的随机字符，可以使用 openssl rand -base64 64 生成。TOTP_VAULT_KEY 需要一串 32 位的随机字符，可以使用 openssl rand -base64 32 生成。DISABLE_REGISTRATION 设置 true 即关闭用户注册。SMTP 可以使用市面上所有的邮件发送产品，或者懒人也可以直接用 Gmail 之类的免费服务，也可以自己搭建 Mailcow 自己用，教程在这儿。然后我们注册个 Maxmind 帐号，注册成功后在左侧菜单 Account > Manage License Keys 里点击 Generate new license key 获取一个 License key 并记录 Account ID 和这个 License key：然后修改 geoip.env，并填入如下信息：GEOIPUPDATE_EDITION_IDS=GeoLite2-Country GEOIPUPDATE_FREQUENCY=168 # update every 7 days 设置 7 天更新一次 GeoIP 数据库 GEOIPUPDATE_ACCOUNT_ID=你的 Account ID GEOIPUPDATE_LICENSE_KEY=你的 License Key 然后抓取镜像并启动：docker compose pull docker compose up -d 启动完成后即可试用 http://127.0.0.1:8000/ 访问 Plausible，如果需要对外进行服务，我们还需要配置 Nginx 反向代理。设置 Nginx 反代从 docker-compose.yaml 配置里可以看出，我们监听在本地 8080 端口，此时我们可以用 Nginx 反代并开启 HTTPS，您可以参考本站教程：安装 NginxNginx 配置 SSL 证书使用 acme.sh 配置自动续签 SSL 证书然后直接反代本地 8080 端口，参考配置如下：location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_redirect off; proxy_set_header X-Forwarded-Proto $scheme; proxy_connect_timeout 300; proxy_send_timeout 300; proxy_read_timeout 300; send_timeout 300; proxy_pass http://127.0.0.1:8000; location = /live/websocket { proxy_pass http://127.0.0.1:8000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; } } 重启 Nginx 后生效我们即可访问 https://stat.example.com/配置 Plausible Analytics访问刚搭建好的 Plausible 并使用配置文件里的管理员邮箱和密码登录 (要使用邮箱登录哦，不是用户名)：登录后新建第一个要统计的网站域名，点击 +Add a website：输入要统计的网站域名，选择发送报告的时区，然后点击 Add snippet → 按钮：然后把统计代码插入你的网页即可进行统计：更新 Plausible Analytics万能的 Docker 更新大法：# 抓取最新的 Docker 镜像 docker compose pull # 重启所有 Docker 镜像 docker compose up -d # 清理 Docker 旧容器和残留镜像 docker system prune 备份 Plausible Analytics其实主要是备份数据库，相关命令如下：docker exec -t plausible_plausible_db_1 pg_dumpall -c -U postgres | gzip > dump_$(date +"%Y-%m-%d_%H_%M_%S").gz 即可按照当前时间 dump 出 PostgreSQL 数据库并使用 gzip 压缩打包。迁移 Plausible Analytics可以参考 Mailcow 的迁移方法。卸载 Plausible Analyticsdocker compose down rm -rf /opt/plausible docker image rm postgres:12 docker image rm maxmindinc/geoipupdate:latest docker image rm plausible/analytics:latest docker image rm yandex/clickhouse-server:21.3.2.5 docker image rm bytemark/smtp:latest docker volume rm plausible_db-data docker volume rm plausible_event-data WordPress 添加方法直接修改你使用的主题的 header.php 文件，在 <?php wp_head(); ?> 后面添加统计代码即可。不想修改主题的也可以直接装官方的插件。VuePress 添加方法如果你使用 VuePress v1.x，那么修改 .vuepress/config.js 文件，在 module.exports 加入：['script', {}, ` const script = document.createElement('script'); script.async = true; script.defer = true; script['data-domain'] = '统计域名'; script.src = 'https://stat.example.com/js/plausible.js'; document.head.appendChild(script);` ], 如果你试用 VuePress v2.x，那么修改 .vuepress/config.ts 文件，在 export default 加入：['script', {}, ` const script = document.createElement('script'); script.async = true; script.defer = true; script['data-domain'] = '统计域名'; script.src = 'https://stat.example.com/js/plausible.js'; document.head.appendChild(script);` ], Next.js 添加方法安装 next-plausible 这个包，然后使用类似如下的代码：import PlausibleProvider from 'next-plausible' export default function MyApp({ Component, pageProps }) { return ( <PlausibleProvider domain="统计域名" customDomain="https://stat.example.com" selfHosted> <Component {...pageProps} /> </PlausibleProvider> ) } 更多的添加方法请查看官网的文档。很多广告屏蔽插件会屏蔽 plausible.js，此时可以把 plausible.js 替换成 script.js 防止被屏蔽。