当前位置: 首页 > news >正文

一个简单的注册的页面,如有错误请指正;(3.JavaScript)

这段代码是一个JavaScript函数,实现了用户登录和上传图片的功能,并包含了一些辅助函数。让我一一解释:

1. `login()`:这个函数用于登录操作。首先,通过`$('#name').val()`来获取ID为`name`的元素的值,同理获取其他元素的值。然后,通过条件判断检查这些值是否为空。如果为空,通过`$('#alert').slideToggle(200)`来显示一个警示框;否则,使用`$.ajax()`方法发送POST请求到指定的URL(`https://c2c.kuxia.top/webapi/user/register`),在请求的数据中包含用户名、密码、姓名、性别和头像地址。请求成功后,根据返回的结果进行处理,若返回结果中的code为1表示注册成功,跳转到首页并打印"注册成功";否则,显示警示框并提示登录失败。

2. `fileImg()`:这个函数用于上传图片。首先,通过`document.getElementById("form")`获取ID为`form`的元素,创建FormData对象并将该元素传入。然后,使用`$.ajax()`方法发送POST请求到指定的URL(`https://c2c.kuxia.top/webapi/index/upload`),将Formdata作为请求的数据,并设置`dataType`为JSON,`cache`为false,`processData`和`contentType`分别为false和false以实现multipart/form-data的方式上传文件。请求成功后,获取服务器返回的图片URL,并通过`$("#imgs").attr('src', `https://c2c.kuxia.top${data.url}`)`将图片预览元素的`src`属性设置为上传的图片URL。

3. `choose(obj)`:这个函数用于选择单选框。在该函数中,首先获取所有名称为`ss`的单选框元素,并将它们的`checked`属性设置为false。然后,将传入的单选框元素的`checked`属性设置为true,实现选中该单选框的效果。

这段代码实现了用户登录和图片上传的功能,通过使用jQuery的-ajax方法实现了异步请求与服务器的交互。其中的条件判断和回调函数用于处理请求成功或失败后的操作,从而实现用户友好的交互体验。同时,使用了FormData对象和XMLHttpRequest Level 2的特性来实现文件上传功能。

function login() {$('#name').val();$('#password').val();$('#namex').val();$('#gender').val();$('#imgs').val();if ($('#name').val() == "" && $('#password').val()==""&&$('#namex').val()==""&&$('#gender').val()==""&&$('#imgs').val()=="") {$('#alert').slideToggle(200)} else {$.ajax({type: "POST",url: "https://c2c.kuxia.top/webapi/user/register",data: {tel: $('#name').val(),pass: $('#password').val(),name: $('#namex').val(),gender: $('#gender').val(),avatar: $('#imgs').val(),},success: function(res) {console.log(res);if (res.code == 1) {window.location.href = "index.html";console.log("注册成功。")} else {$('#alert').slideToggle(200)$('#alert').text("登录失败,请检查您输入的信息。");console.log("账号或密码错误,请重新输入");}},error: function(res) {console.log(res);if (res.code == 0) {// window.location.href="index.html";} else {$('#alert').slideToggle(200);$('#alert').text("登录失败,请检查您输入的信息。");console.log("账号或密码错误,请重新输入");}},})}
}let urlImg = '';function fileImg() {let myForm = document.getElementById("form");let data = new FormData(myForm)console.log(data);$.ajax({url: "https://c2c.kuxia.top/webapi/index/upload",type: 'POST',data: data,dataType: 'json',cache: false,processData: false,contentType: false,success: function(data) {console.log(data);urlImg = data.url;$("#imgs").attr('src', `https://c2c.kuxia.top${data.url}`)}});
}function choose(obj) {let ss = document.getElementsByName("ss");for (let i = 0; i < ss.length; i++) {ss[i].checked = false;}obj.checked = true;
}

 

相关文章:

一个简单的注册的页面,如有错误请指正;(3.JavaScript)

这段代码是一个JavaScript函数&#xff0c;实现了用户登录和上传图片的功能&#xff0c;并包含了一些辅助函数。让我一一解释&#xff1a; 1. login()&#xff1a;这个函数用于登录操作。首先&#xff0c;通过$(#name).val()来获取ID为name的元素的值&#xff0c;同理获取其他…...

selenium (自动化概念 测试环境配置)

什么是自动化测试 自动化测试介绍 自动化测试指软件测试的自动化&#xff0c;在预设状态下运行应用程序或者系统. 预设条件包括正常和异常&#xff0c;最后评估运行结果。   自动化测试&#xff0c;就是将人为驱动的测试行为转化为机器执行的过程。 【机器 代替 人工】 自动化…...

Mybatis-Plus(企业实际开发应用)

一、Mybatis-Plus简介 MyBatis-Plus是MyBatis框架的一个增强工具&#xff0c;可以简化持久层代码开发MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 官网&a…...

Spring Web MVC入门

一&#xff1a;了解Spring Web MVC (1)关于Java开发 &#x1f31f;Java开发大多数场景是业务开发 比如说京东的业务就是电商卖货、今日头条的业务就推送新闻&#xff1b;快手的业务就是短视频推荐 (2)Spring Web MVC的简单理解 &#x1f497;Spring Web MVC&#xff1a;如何使…...

【C++】mapset的底层结构 -- AVL树(高度平衡二叉搜索树)

前面我们对 map / multimap / set / multiset 进行了简单的介绍&#xff0c;可以发现&#xff0c;这几个容器有个共同点是&#xff1a;其底层都是按照二叉搜索树来实现的。 但是二叉搜索树有其自身的缺陷&#xff0c;假如往树中插入的元素有序或者接近有序&#xff0c;二叉搜索…...

吴恩达《机器学习》1-4:无监督学习

一、无监督学习 无监督学习就像你拿到一堆未分类的东西&#xff0c;没有标签告诉你它们是什么&#xff0c;然后你的任务是自己找出它们之间的关系或者分成不同的组&#xff0c;而不依赖于任何人给你关于这些东西的指导。 以聚类为例&#xff0c;无监督学习算法可以将数据点分成…...

一个简单的注册页面,如有错误请指正(2.css)

这段CSS代码定义了页面的样式&#xff0c;让我逐个解释其功能&#xff1a; 1. * {}&#xff1a;通配符选择器&#xff0c;用于将页面中的所有元素设置统一的样式。这里将margins和paddings设置为0&#xff0c;以去除默认的边距。 2. div img {}&#xff1a;选择页面中所有div…...

【Unity精华一记】特殊文件夹

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…...

Node.js中的单线程服务器

为了解决多线程服务器在高并发的I/O密集型应用中的不足&#xff0c;同时避免早期简单单线程服务器的性能障碍&#xff0c;Node.js采用了基于"事件循环"的非阻塞式单线程模型&#xff0c;实现了如下两个目标&#xff1a; &#xff08;1&#xff09;保证每个请求都可以…...

如何删除数组中的某个元素?

如何删除数组中的某个元素&#xff1f; 例&#xff1a;给你一个数组 nums 和一个值 val&#xff0c;你需要移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 三种方法 1.元素前移&#xff08;时间复杂度&#xff1a;O(N^2)&#xff0c;空间复杂度&#x…...

Apache ActiveMQ RCE漏洞复现(CNVD-2023-69477)

0x01 产品简介 ActiveMQ是一个开源的消息代理和集成模式服务器&#xff0c;它支持Java消息服务(JMS) API。它是Apache Software Foundation下的一个项目&#xff0c;用于实现消息中间件&#xff0c;帮助不同的应用程序或系统之间进行通信。 0x02 漏洞概述 Apache ActiveMQ 中存…...

【BUG】Nginx转发失败解决方案

最近在做项目的时候出现了一个问题&#xff0c;琢磨了好久&#xff0c;来浅浅记录一下。 这个项目后端使用的是gateway网关和nacos实现动态的路由&#xff0c;前端使用nginx来管理前端资源&#xff0c;大体流程&#xff1a;浏览器发起请求&#xff0c;经过nginx代理&#xff0c…...

综合OA管理系统源码 OA系统源码

综合OA管理系统源码 OA系统源码 功能介绍&#xff1a; 编号&#xff1a;LQ10 一&#xff1a;系统管理 系统配置&#xff0c;功能模块&#xff0c;功能节点&#xff0c;权限角色&#xff0c;操作日志&#xff0c;备份数据&#xff0c;还原数据 二&#xff1a;基础数据 审批…...

9-MySQL提高数据管理效率(分库分表实践)

MySQL提高数据管理效率&#xff08;分库分表实践&#xff09; 在当今的互联网时代&#xff0c;随着业务规模的不断扩大&#xff0c;数据量也呈现出爆炸性的增长。如何有效地管理和存储这些数据&#xff0c;以及提高数据库的性能和可扩展性&#xff0c;成为了一个迫切需要解决的…...

经典卷积神经网络 - NIN

网络中的网络&#xff0c;NIN。 AlexNet和VGG都是先由卷积层构成的模块充分抽取空间特征&#xff0c;再由全连接层构成的模块来输出分类结果。但是其中的全连接层的参数量过于巨大&#xff0c;因此NiN提出用1*1卷积代替全连接层&#xff0c;串联多个由卷积层和“全连接”层构成…...

leetcode_2558 从数量最多的堆取走礼物

1. 题意 给定一个数组&#xff0c;每次从中取走最大的数&#xff0c;返回开根号向下取整送入堆中&#xff0c;最后计算总和。 从数量最多的堆取走礼物 2. 题解 直接用堆模拟即可 2.1 我的代码 用了额外的空间O( n ) priority_queue会自动调用make_heap() 、pop_heap() c…...

01. 嵌入式与人工智能是如何结合的?

CPU是Arm A57的 GPU是128cuda核 一.小车跟踪的需求和设计方法 比如有一个小车跟踪的项目。 需求是&#xff1a;小车识别出罪犯&#xff0c;然后去跟踪他。方法&#xff1a;摄像头采集到人之后传入到开发板&#xff0c;内部做一下识别&#xff0c;然后控制小车去跟随。在人工智…...

vue3.0运行npm run dev 报错Cannot find module node:url

vue3.0运行npm run dev 报错Cannot find module 问题背景 近期用vue3.0写项目&#xff0c;npm init vuelatest —> npm install 都正常,npm run dev的时候报错如下&#xff1a; failed to load config from F:\code\testVue\vue-demo\vite.config.js error when starting…...

26. 删除排序数组中的重复项、Leetcode的Python实现

博客主页&#xff1a;&#x1f3c6;看看是李XX还是李歘歘 &#x1f3c6; &#x1f33a;每天分享一些包括但不限于计算机基础、算法等相关的知识点&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知识点&#x1f4d6;是你想要的&#x1f497; ⛽️今…...

荣耀推送服务消息分类标准

前言 为了提升终端用户的推送体验、营造良好可持续的通知生态&#xff0c;荣耀推送服务将对推送消息进行分类管理。 消息分类 定义 荣耀推送服务将根据应用类型、消息内容和消息发送场景&#xff0c;将推送消息分成服务通讯和资讯营销两大类别。 服务通讯类&#xff0c;包…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...