当前位置: 首页 > 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;
}

 

相关文章:

  • 记一次fineBI的增量删除更新BUG
  • Ansible上通过roles简化playbook演示介绍
  • 2023年【河北省安全员B证】新版试题及河北省安全员B证试题及解析
  • Vue中this指向问题
  • mongodb数据迁移的方法
  • CTF-Web(2)SQL注入
  • 【java学习—九】内部类(7)
  • 线程池的理解
  • 软考-网络安全审计技术原理与应用
  • LeetCode|股票问题|714. 买卖股票的最佳时机含手续费、309. 买卖股票的最佳时机含冷冻期
  • flutter升级+生成drift文件
  • python:使用Scikit-image对遥感影像进行傅里叶变换特征提取(fourier)
  • 安防监控项目---boa服务器的移植
  • 什么是web3.0?
  • orb-slam3编译手册(Ubuntu20.04)
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 【node学习】协程
  • angular2开源库收集
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • Java基本数据类型之Number
  • Java应用性能调优
  • JSDuck 与 AngularJS 融合技巧
  • Promise面试题2实现异步串行执行
  • Redis在Web项目中的应用与实践
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典:程序员走江湖必备
  • SpiderData 2019年2月25日 DApp数据排行榜
  • ucore操作系统实验笔记 - 重新理解中断
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • Vim 折腾记
  • Vue2 SSR 的优化之旅
  • 阿里云购买磁盘后挂载
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 检测对象或数组
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 删除表内多余的重复数据
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 我的业余项目总结
  • 学习笔记TF060:图像语音结合,看图说话
  • 一道闭包题引发的思考
  • 再次简单明了总结flex布局,一看就懂...
  • 智能网联汽车信息安全
  • LIGO、Virgo第三轮探测告捷,同时探测到一对黑洞合并产生的引力波事件 ...
  • Play Store发现SimBad恶意软件,1.5亿Android用户成受害者 ...
  • 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes ...
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #stm32驱动外设模块总结w5500模块
  • #每天一道面试题# 什么是MySQL的回表查询
  • (10)STL算法之搜索(二) 二分查找
  • (2.2w字)前端单元测试之Jest详解篇
  • (2015)JS ES6 必知的十个 特性
  • (2021|NIPS,扩散,无条件分数估计,条件分数估计)无分类器引导扩散
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (接口自动化)Python3操作MySQL数据库