一个简单的注册的页面,如有错误请指正;(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;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/122761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JAVA学习笔记】 51 - 日期类

项目代码 一、第一代日期类 1.Date: 精确到亳秒&#xff0c;代表特定的瞬间 2.SimpleDateFormat:格式和解析日期的类 3.SimpleDateFormat格式化和解析日期的具体类。它允许进行格式化(日期> 文本)、解析(文本->日期)和规范化 public class Date01 {public static voi…

机器学习(python)笔记整理

目录 一、数据预处理&#xff1a; 1. 缺失值处理&#xff1a; 2. 重复值处理&#xff1a; 3. 数据类型&#xff1a; 二、特征工程: 1. 规范化&#xff1a; 2. 归一化&#xff1a; 3. 标准化(方差)&#xff1a; 三、训练模型&#xff1a; 如何计算精确度&#xff0c;召…

阿里蚂蚁淘宝等多次一面面试面经

一面采用电话面试笔试链接做算法题&#xff08;可能开视频&#xff09;的形式 蚂蚁第一次&#xff1a; 自我介绍 技术一般使用开源技术还是自己研发 开源spring cloud等 流水线用来做什么 用户是什么人 应用场景 是toB的对吧 学到的最前沿的技术有哪些 gateway全局权限…

Openssl数据安全传输平台016:在QT中的数据库操作+在项目中的设计与实现

文章目录 1 在QT中 的数据库操作1.1 QSqlDatabase1.2 QSqlQuery 2 QT中json相关的操作类2.1 json格式字符串 -> json文档对象2.2 组织一个json数组/json对象 -> 写文件/发送 1 在QT中 的数据库操作 在Qt中进行数据库操作需要使用的类: QSqlDataBase 属于的模块: sql 使用…

.NET CORE 3.1 集成JWT鉴权和授权2

JWT&#xff1a;全称是JSON Web Token是目前最流行的跨域身份验证、分布式登录、单点登录等解决方案。 通俗地来讲&#xff0c;JWT是能代表用户身份的令牌&#xff0c;可以使用JWT令牌在api接口中校验用户的身份以确认用户是否有访问api的权限。 授权&#xff1a;这是使用JWT的…

搭建gnn环境

1.无法激活 激活pytorch遇到报错usage: conda-script.py [-h] [--no-plugins] [-V] COMMAND ... conda-script.py: error: arg-CSDN博客 参考教程 【精选】手把手教你在windows10安装GNN相关环境&#xff08;torchtorch_geometricrdkitdeepchem&#xff09;_gnn环境相关的包-…

redis6.0源码分析:字典扩容与渐进式rehash

文章目录 字典数据结构结构设计dictType字典类型为什么字典有两个哈希表&#xff1f;哈希算法 扩容机制扩容前置知识字典存在几种状态&#xff1f;容量相关的关键字段定义字典的容量都是2的幂次方 扩容机制字典什么时候会扩容&#xff1f;扩容的阈值 & 扩容的倍数哪些方法会…

matlab中类的分别之handle类和value类——matlab无法修改类属性值的可能原因

写在之前&#xff08;吐槽&#xff09; 最近由于变化了一些工作方向&#xff0c;开始需要使用matlab进行开发&#xff0c;哎哟喂&#xff0c;matlab使用的我想吐&#xff0c;那个matlab编辑器又没代码提示&#xff0c;又没彩色&#xff0c;我只好用vscode进行代码编辑&#xf…

MySQL篇---第六篇

系列文章目录 文章目录 系列文章目录一、 MySQL 中 varchar 与 char 的区别?varchar(30) 中的 30代表的涵义?二、 int(11) 中的 11 代表什么涵义?三、为什么 SELECT COUNT(*) FROM table 在 InnoDB 比MyISAM 慢?一、 MySQL 中 varchar 与 char 的区别?varchar(30) 中的 30…

EASYX动画效果实现

eg1:绘制小球的动画效果 通过一下的代码实现小球从左向右移动效果&#xff0c;计算小球的移动速度和帧率实现移动效果平和造成视觉上的错觉 #include <stdio.h> #include <easyx.h> #include <iostream> #include <math.h> #define PI 3.14 // 1PI …

springboot在线招聘系统

springboot在线招聘管理系统&#xff0c;java在线招聘管理系统&#xff0c;在线招聘管理系统 运行环境&#xff1a; JAVA版本&#xff1a;JDK1.8 IDE类型&#xff1a;IDEA、Eclipse都可运行 数据库类型&#xff1a;MySql&#xff08;8.x版本都可&#xff09; 硬件环境&#xf…

虚机Centos忘记密码如何重置

1进入开机前的页面&#xff0c;选中第一个&#xff0c;按“e”键&#xff0c;进入编辑模式 2找到ro crashkernel项&#xff0c;将ro替换成 rw initsysroot/bin/sh 3 Ctrlx mount -o remount, rw / chroot /sysroot chroot /sysroot passwd root 输入两次密码 touch /.a…

云服务器的先驱,亚马逊云科技海外云服务器领军者

随着第三次工业革命的发展&#xff0c;移动互联网技术带来的信息技术革命为我们的生活带来了极大的便捷。其中&#xff0c;不少优秀的云服务器产品发挥了不可低估的作用&#xff0c;你或许听说过亚马逊云科技、谷歌GCP、IBM Cloud等优秀的海外云服务器。那么云服务器有哪些&…

sqoop连接MYSQL报错处理

Sqoop远程连接MYSQL数据库报/apache/commons/lang/StringUtils错误&#xff0c;如下&#xff1a; [rootmanager ~]# sqoop list-databases --connect jdbc:mysql://10.100.81.207:3306/ --username root --password 123 Warning: /home/bigdata/sqoop//../hcatalog does not e…

Word批量删除文档属性和个人信息方法图解

投标文件中设计敏感信息&#xff0c;在投标前必须删除&#xff0c;Word批量删除文档属性和个人信息方法图解&#xff1a; 右键word文件属性--详细信息&#xff0c;可以查看如下信息&#xff1b; 删除上述信息的办法&#xff1a; 1.打开word文件---文件 2.检查文档、检查文档 检…

【Python · PyTorch】线性代数 微积分

本文采用Python及PyTorch版本如下&#xff1a; Python&#xff1a;3.9.0 PyTorch&#xff1a;2.0.1cpu 本文为博主自用知识点提纲&#xff0c;无过于具体介绍&#xff0c;详细内容请参考其他文章。 线性代数 & 微积分 1. 线性代数1.1 基础1.1.1 标量1.1.2 向量长度&…

分类预测 | Matlab实现KOA-CNN-BiLSTM-selfAttention多特征分类预测

分类预测 | Matlab实现KOA-CNN-BiLSTM-selfAttention多特征分类预测 目录 分类预测 | Matlab实现KOA-CNN-BiLSTM-selfAttention多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现KOA-CNN-BiLSTM-selfAttention开普勒算法优化卷积双向长短期记忆神…

HIT_OS_LAB1 调试分析 Linux 0.00 引导程序

操作系统实验一 姓名&#xff1a;董帅学号&#xff1a;2021111547班级&#xff1a;21R0312 1.1 实验目的 熟悉实验环境掌握如何手写Bochs虚拟机的配置文件掌握Bochs虚拟机的调试技巧掌握操作系统启动的步骤 1.2 实验内容 1.2.1 掌握如何手写Bochs虚拟机的配置文件 boot: f…

使用 Visual Studio Code 编写 TypeScript程序

安装 TypeScript 首先&#xff0c;确保你已经安装了 TypeScript&#xff0c;如果没有安装&#xff0c;请参考https://blog.csdn.net/David_house/article/details/134077973?spm1001.2014.3001.5502进行安装 创建 新建一个文件夹&#xff0c;用vs code打开&#xff0c;在文…

系统平台同一网络下不同设备及进程的话题通讯--DDS数据分发服务中间件

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言(1)中间件的介绍(2)DDS介绍(3)发布者(4)订阅者(5)idl文件(定义msg结构体)(6)QoS(Quality of Service)策略(7)DDS测试工具介绍(…