本篇实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能

需求描述:
1. 请求后端Api接口地址
2. 根据返回信息进行判断处理前端界面的跳转,实现登录

开始实现:
首先是index.html页面 上面就两个输入框 用户名和密码 一个登录按钮,点击登录按钮拿输入的登录信息与后端Api接口中的进行对比判断,如果校验成功则跳转到main.html页面,并显示登录的用户名

1. 实现登录界面,利用bootstrap框架快速实现登录界面原型

2. 申请一个后端Api接口:https://j.tewx.cn
1) 注册登录

2) 申请Api接口 免费10000次访问,key里输入:loginInfo  value里面输入:{"name":"zhangwei","psd":"123"}

3) 拿到Api接口地址

3. 在js中放入api地址,进行请求

观察返回数据

做出解析做出处理

实现逻辑判断跳转或者提示

4. 最终效果
密码错误

登录成功

5. 源码地址:
https://j.tewx.cn/get/web.zip

有问题可以留言问我哦~

实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能的更多相关文章

  1. jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...

  2. 动态提交使用jQuery 完成ajax 文件下载----后端php

    1.js代码 // Ajax 文件下载 //当不用传参时,可以将data去掉 jQuery.download = function(url, data, method){ // 获得url和data ...

  3. 如何在jQuery的Ajax调用后管理一个重定向请求

    1 success:function(data){ 2 if(data.xx == "xx") 3 { 4 //code... 5 window.location.href =&q ...

  4. 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后? js获取某个日期

    腾讯云图片鉴黄集成到C#   官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...

  5. 前端通信:ajax设计方案(八)--- 设计请求池,复用请求,让前端通信快、更快、再快一点

    直接进入主题,本篇文章有点长,包括从设计阶段,到摸索阶段,再到实现阶段,最后全面覆盖测试阶段(包括数据搜集清洗),还有与主流前端通信框架进行对比PK阶段. 首先介绍一下一些概念: 1. 浏览器的并发能 ...

  6. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  7. Java Web实现用户登录功能

    java web 学习记录一下 mvc结构实现mysql 连接 什么是mvc MVC是模型(model).视图(view).控制(controller)这三个单词上的首字母组成.它是一种应用模型,它的 ...

  8. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...

  9. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

随机推荐

  1. 工作之余第二篇(看源码自己实现ArrayList和LinkList)

    先看源码: 首先看构造器,构造器有三种,一种直接给定初始长度的,如下代码 public ArrayList(int initialCapacity) { if (initialCapacity > ...

  2. Java 搭建 RabbitMq 消息中间件

    前言 当系统中出现"生产"和"消费"的速度或稳定性等因素不一致的时候,就需要消息队列. 名词 exchange: 交换机 routingkey: 路由key q ...

  3. js实现element中可清空的输入框(2)

    接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...

  4. #String类简述(小白理解,小白编写,欢迎大神指点,小白跪谢)

    @ 目录 一.前言(可忽略) 二.String变量的认知 三.String类的构造方法 四.String类的基本方法 4.1 toString()方法 4.2 equals()方法 4.3 equal ...

  5. windows10 缺失 msvcp140.dll 解决办法

    1.问题描述 我更新完windows10 驱动后,出现计算机缺失msvcp140.dll文件,虚机和QQ都无法启动 2.解决办法 查找大量文章,最终发现通过重新安装 Visual Studio 201 ...

  6. Mysql在windows环境如何修改密码?

    1.关闭正在运行的MySQL服务. 2. 打开DOS窗口,转到mysql\bin目录. 3. 输入mysqld --skip-grant-tables 回车.--skip-grant-tables 的 ...

  7. JAVA安装第一步JDK

    安装JDK----(一学就会) 一.百度搜索JDK,找到下载的地址 二.下载属于自己电脑的对应版本 三.下载到本地之后,双击安装JDK 四.配置环境变量 我的电脑->右键->属性 环境变量 ...

  8. PTE 准备之 Repeat sentence

    Repeat sentence After listening to a sentence ,repeat the sentence 3-9 seconds 15 seconds Strategies ...

  9. lucent,solr,ES比较

    |0什么是全文搜索 什么是全文搜索引擎? 百度百科中的定义:全文搜索引擎是目前广泛应用的主流搜索引擎.它的工作原理是计算机索引程序通过扫描文章中的每一个词,对每一个词建立一个索引,指明该词在文章中出现 ...

  10. 攻防世界 reverse 进阶5-7

    5.re-for-50-plz-50  tu-ctf-2016 流程很简单,异或比较 1 x=list('cbtcqLUBChERV[[Nh@_X^D]X_YPV[CJ') 2 y=0x37 3 z= ...