前端与后端接口的交互案例
一、案例描述
1,前端页面提供用户名,密码输入框。
2,通过Ajax发送请求到后端Serlvet。
3,后端Serlvet处理请求,根据输入的用户名和密码返回给前端不同信息
前端访问后端接口通过后端提供的的URL
二、主要代码
1、前端页面
<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<meta charset="utf-8">
</head><!-- 待补充的javaScript Ajax请求代码 在下面 --!><body><form action="#">username:<input type="text" name="username"><br>password:<input type="password" name="password"><br><input type="button" value="submit" id="submit"></form>
</body>
</html>
如图:简单到不忍直视的页面
2、Ajax请求代码
这里使用了jquery-1.8.3.js库,顺便回顾下函数的书写格式
格式:jQuery.ajax([settings])
* 参数settings:设置所有的参数,JSON对象
* data:请求参数
* type:请求方式 (“POST” 或 “GET”),
* success:成功的回调函数,function(data, [textStatus], [jqXHR])
* error:请求失败时调用函数
* dataType:预期服务器返回的数据类型
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">$(function(){$("#submit").click(function(){var url = "/myblog/servlet/loginServlet";var params = {"username":$("input[type='text']").val(), "password":$("input[type='password']").val()};$.ajax({"url" : url,"data" : params,"type" : "post","success" : function(data) {// 参数为json类型的对象alert(data.message)},"error" : function() {alert("用户名或者密码错误");}});});});
</script>
3、Servlet代码及web.xml配置
写这个,有点弱智了,但为了代码的完整性,忍一下吧!
web.xml
<servlet><servlet-name>LoginServlet</servlet-name><servlet-class>com.imooc.login.LoginServlet</servlet-class></servlet><servlet-mapping><servlet-name>LoginServlet</servlet-name><url-pattern>/servlet/loginServlet</url-pattern></servlet-mapping>
servlet:
public class LoginServlet extends HttpServlet {private static final long serialVersionUID = 5417488369543075097L;public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("username");String password = request.getParameter("password");String message = "{\"message\":\"登录成功\"}";response.setContentType("application/json;charset=utf-8");if("双击".equals(username) && "666".equals(password)) {response.getWriter().write(message);}}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}
result picture:
前端与后端接口的交互案例相关推荐
- 前端调用后端接口的错误(400)
前端调用后端接口时,浏览器debug出现Failed to load resource: the server responded with a status of 400 (Bad Request) ...
- Nginx解决前端调用后端接口跨域问题
Nginx解决前端调用后端接口跨域问题 参考文章: (1)Nginx解决前端调用后端接口跨域问题 (2)https://www.cnblogs.com/wangymd/p/11200746.html ...
- python的前端和后端_前端与后端的数据交互(jquery ajax+python flask)
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...
- App前端及后端接口,模拟数据及返回值
App前端及后端接口,模拟数据 :接口文档 目录 1. 全局状态码 6 2. 前台 7 2.1. 首页 7 2.1.1. 商品分类列表接口 7 2.1.2. 展示轮播图接口 9 2.1.3. 展示广告 ...
- python后端数据发送到前端_前端与后端的数据交互(jquery ajax+python flask)
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...
- python后端与前端数据交互_前端与后端的数据交互(jquery ajax+python flask)
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...
- 【学习笔记】Web前端到后端数据的交互
[学习笔记]Web前端到后端数据的交互
- webstorm前端调用后端接口_一篇前端同学对后端接口的吐槽
来源:juejin.im/post/5cfbe8c7e51d4556da53d07f 前言 去年的某个时候就想写一篇关于接口的吐槽,当时后端提出了接口方案对于我来说调用起来非常难受,但又说不上为什么, ...
- 前端和后端如何进行交互?
背景 目前互联网应用呈现方式基本都是app客户端和web端,其次是移动网站和小程序.以app客户端或web端为例子(统一认为前端),前端负责用户的交互与数据收集与展示,数据经后台处理存储在数据库.设计 ...
最新文章
- JEECMS自定义标签开发步骤
- PHP框架和springboot区别,Spring和SpringBoot的区别
- 《C和指针》——在一组字符串中查找
- ieee期刊的科技写作思路曹文平_科技论文写作与发表教程(第六版)
- 【十八】文件译文:graph.js.fmkr (测试报告模版配置文件)
- c# 溢出抛异常_C#中的int是否没有溢出异常?
- 【scrapy windows环境下安装遇到的问题】
- gravity和layout_gravity
- 正则匹配身份证和邮箱
- 钢琴块2电脑版_包租婆租赁合同管理系统电脑版|包租婆租赁合同管理系统PC版下载_v10.3.5.2...
- Linux shell脚本编写
- 分享4个不错的软件资源下载网站(值得珍藏)
- 杭州卧兔:全球品牌出海峰会大咖集聚讲述品牌出海关键要素
- 国民统计概论考试能用计算机吗,统计考试《国民经济统计概论》试题
- hdmi网线延长器_HDMI单网线延长器HE200使用教程
- Go slice和arry的区别
- python处理中文乱码现象
- Git —— SSH配置多仓库不同账户访问
- apiserver报错:OpenAPI spec does not exists
- 我经历的字节跳动后台开发实习二面,面试官说叫我补补操作系统和算法