本篇实现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. 别找了,这可能是全网最全的鸿蒙(OpenHarmony)刷机指南

    目录: 1. 配置编译环境 2. 编译HarmonyOS源代码 3. 烧录HarmonyOS 4.下载文中资源 5.作者文章合集 摘要:相信很多同学都玩过鸿蒙(HarmonyOS)了,不过估计大多数同 ...

  2. TypeError: Object of type 'datetime' is not JSON serializable

    我的描述:我在flask框架中引用orm查数据库并返回数据,出现此类问题,如下图: 解决方案: 1.从表面意思看,就是说datetime时间类型无法被序列化.于是我百度了网上的同事的解答,大多说是时间 ...

  3. 随手一记,关于Java日期时间格式化

    在Java中,我们大多数情况下格式化日期都是使用simpleDateFormat,比如把一个日期格式化成:2019-12-31的形式,我们一般定义模板为:yyyy-MM-dd的形式. 我们需要注意的是 ...

  4. sun公司和apache使用ftpclient的区别

    最近因为使用FTP实现上传下载,因为已经有前辈使用了,照着敲了一遍(绝对没有复制粘贴啊,发誓).但是今天突然发现FTPClient还不一样,仔细看了看,一个是sun.net.ftp.FtpClient ...

  5. mysql日志系统简单使用

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBM ...

  6. 大话Spark(6)-源码之SparkContext原理剖析

    SparkContext是整个spark程序通往集群的唯一通道,他是程序的起点,也是程序的终点. 我们的每一个spark个程序都需要先创建SparkContext,接着调用SparkContext的方 ...

  7. 利用CORDIC算法计算三角函数

    这里主要先介绍如何利用CORDIC算法计算固定角度\(\phi\)的\(cos(\phi)\).\(sin(\phi)\)值.参考了这两篇文章[1].[2]. 一般利用MATLAB计算三角函数时,用\ ...

  8. 你不知道的Scheduled定时任务骚操作

    目录 一.什么是定时任务 二.项目依赖 三.注解式定时任务 3.1 cron 3.2 fixedDelay 3.3 fixedDelayString 3.4 fixedRate 3.5 fixedRa ...

  9. 剑指 Offer 09. 用两个栈实现队列 +java中栈和队列的使用

    剑指 Offer 09. 用两个栈实现队列 题目链接 class CQueue { private Stack<Integer> sta1; private Stack<Intege ...

  10. POJ-2236(并查集)

    Wireless NetWork POJ-2236 需要注意这里的树的深度需要初始化为0. 而且,find函数需要使用路径压缩,这里的unint合并函数也使用了优化(用一开始简单的合并过不了). #i ...