前端与后端接口的交互案例

       

一、案例描述

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

如图:简单到不忍直视的页面
这里写图片描述

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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);    }}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

result picture:
这里写图片描述

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

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

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

相关文章

20172301 2017-2018-2《程序设计与数据结构》课程总结

20172301 2017-2018-2《程序设计与数据结构》课程总结 每周作业链接汇总 预备作业1 简要内容:对上学期的认识和总结&#xff0c;对专业和老师的期望。预备作业2 简要内容:关于技能和学习技能经验。预备作业3 简要内容:安装虚拟机和Linux命令学习。第一周作业 简要内容: 计算机系…

软链接和硬链接到底有啥作用和区别

前言&#xff1a;在网上搜索了好久&#xff0c;看了很多博客&#xff0c;某度知道等等。关于软硬链接的解释都太模糊&#xff0c;还有什么i节点&#xff0c;跨分区根本弄不明白&#xff0c;在查阅了书籍和询问老师后决定自己写一篇简单的博文&#xff0c;然初学者都能够明白的博…

redis 批量删除操作

redis 原生删除方法 del key1 key2 ... 只支持显示删除 使用*通配符 和 xargs可以很方便地进行批量删除 形式如下&#xff1a; redis-cli -h 192.168.1.45 -p 6379 keys "*" | xargs redis-cli -h 192.168.1.45 -p 6379 -n 6 del *通配符&#xff1a;匹配所有字符 补…

c++ 的makefile文件实例

首先声明&#xff0c; 感谢九哥的帮助&#xff0c;因为从来没写过makefile&#xff0c; 所以一直是手动编译&#xff0c; 然后有一次写了三个文件&#xff0c; 需要编译&#xff0c; 而我只编译了一个文件&#xff0c; 所以一直出错&#xff0c; 九哥告诉我用makefile更方便&am…

操作系统短作业优先(SJF)调度算法

一&#xff0c;算法代码#include<stdio.h>struct sjf { //定义进程的结构体 char name[10];//进程名 float arrivetime;//到达时间 float servicetime;//服务时间 float starttime;//开始时间 float finishtime;//完成时间 float zztime; //周转时间 …

操作系统进程调度先来先服务FCFS

一&#xff0c;实验的流程图二&#xff0c;实验代码注&#xff1a;本代码主要来自豆丁&#xff0c;加入本人的部分修改。。//本FCFS是用不带都结点的链表完成。当然也可以用其他数据结构 #include<stdio.h>#include<stdlib.h>typedef struct PCB //定义进程控…

如何给SAP Cloud Connector Region列表中添加新的Region

SAP help里提供了CloudFoundry和Neo环境下可用的Region和API endpoint&#xff1a; 当我们期望用SAP Cloud Connector连接某个SAP云平台Region时&#xff0c;一般是从F4 value help里选择&#xff1a; 如果drop down list里没有我们希望使用的region怎么办&#xff1f; 解决方案…

CUDA从入门到精通

CUDA从入门到精通&#xff08;零&#xff09;&#xff1a;写在前面在老板的要求下&#xff0c;本博主从2012年上高性能计算课程开始接触CUDA编程&#xff0c;随后将该技术应用到了实际项目中&#xff0c;使处理程序加速超过1K&#xff0c;可见基于图形显示器的并行计算对于追求…

Eigen C++开源矩阵计算工具——Eigen的简单用法

Eigen非常方便矩阵操作&#xff0c;当然它的功能不止如此&#xff0c;由于本人只用到了它的矩阵相关操作&#xff0c;所以这里只给出了它的一些矩阵相关的简单用法&#xff0c;以方便快速入门。矩阵操作在算法研究过程中&#xff0c;非常重要&#xff0c;例如在图像处理中二维高…

删除苹果自带软件后果_苹果IOS备忘录便签软件敬业签恢复删除内容应该怎么操作?...

敬业签是一款功能比较全面的苹果手机桌面备忘录便签软件&#xff0c;主要功能包括&#xff1a;云储存、多端云同步、提醒待办事项、时间管理、标记已完成、月视图和时间轴等。在使用苹果IOS备忘录便签软件敬业签的时候&#xff0c;如果不小心误删了内容&#xff0c;要想恢复的话…

OpenCV 获取摄像头并显示摄像头视频

OpenCV 获取摄像头&#xff0c;新建窗口显示摄像头视频 结合Leaning OpenCV 第二个例子 显示一个视屏文件 写了一下 获取摄像头的代码为并且创建窗口显示的代码为&#xff1a;#include "stdafx.h"#include <cv.h>#include <cxcore.h>#include <highg…

ubuntu安装提醒写入失败 没有启动项_手把手教你如何安装windo10+Ubuntu18.10双系统...

踩坑经历以前一直都是用win10系统在自己的电脑上开发&#xff0c;在公司也都是用Ubuntu系统&#xff0c;现在想在自己的笔记本上安装一个Ubuntu系统&#xff0c;所以就想着在不用重装系统的情况下&#xff0c;装一个Ubuntu系统&#xff0c;所以就准备装一个双系统&#xff0c;安…

图像处理常用边缘检测算子总结

不同图像灰度不同&#xff0c;边界处一般会有明显的边缘&#xff0c;利用此特征可以分割图像。需要说明的是&#xff1a;边缘和物体间的边界并不等同&#xff0c;边缘指的是图像中像素的值有突变的地方&#xff0c;而物体间的边界指的是现实场景中的存在于物体之间的边界。有可…

微信开发者工具 wxmi修改模版颜色_网站建设公司讲解:微信小程序的开发者工具界面...

网站建设公司深圳市博纳网络信息技术有限公司()讲解&#xff1a;微信小程序的开发者工具界面创建项目后&#xff0c;进入到微信开发者工具界面&#xff0c;界面大致可以分为6个区域&#xff1a;①菜单栏区域&#xff0c;②模拟器、编辑器、调试器显示与隐藏区域&#xff0c;③模…

【微信小程序】数组操作

Page({data: {list:[{id:1,name:应季鲜果,count:1},{id:2,name:精致糕点,count:6},{id:3,name:全球美食烘培原料,count:12},{id:4,name:无辣不欢生猛海鲜,count:5}]} }) 一、向前向后新增数组 //假设这一段是我们要新增的数组 var newarray [{id:5,name:向后增加数据--new Dat…

cocos 禁掉快速点击_win10系统快速运行debug程序的技巧

win10系统快速运行debug程序的技巧dosBox和程序对很多用户来说都是非常陌生的&#xff0c;其中debug对用户来说亦是如此&#xff0c;其实debug程序是开发工具中的一种&#xff0c;作为系统中预装的开发工具在系统中存在自然会有它的用处。但是在平时需要使用的时候并没有快速能…

带孩子们做环球旅行的读后感_父母带孩子做心理咨询,需要注意哪些事项?

最近&#xff0c;带孩子来做心理咨询的父母接踵而至&#xff0c;但是很多时候&#xff0c;父母可能无意识会有一些影响心理咨询与治疗的效果的行为&#xff0c;对于他们来说&#xff0c;可能需要注意这几点&#xff1a;1、守时心理咨询需要精力与时间&#xff0c;一般咨询师为了…

OpenCV函数cvFindContours

提取轮廓在OpenCV里有一个函数 cvFindContours&#xff1a;int cvFindContours( CvArr* image, CvMemStorage* storage, CvSeq** first_contour,int header_sizesizeof(CvContour),int modeCV_RETR_LIST,int methodCV_CHAIN_APPROX_SIMPLE, CvPoint offsetcvPoint(0,0) );这个函…

消息队列控制灯代码_代码实现RabbitMQ死信队列的创建

‍‍前言&#xff1a;‍‍之前有写过死信队列的使用场景以及通过管控台创建死信。这次就通过代码实现死信队列的创建&#xff0c;同时也分享一下RabbitMQ封装的类。准备&#xff1a;1. 先准备一个死信队列(最后用来消费)的参数配置&#xff0c;包括虚拟机&#xff0c;交换机&am…

平板电脑可以插u盘吗_电视TV盒子安装app的六个方法,u盘/电脑/手机都可以安装...

点击上方蓝字 关注我们首先&#xff0c;要看盒子是否支持安装第三方app&#xff0c;这期只讲支持第三方app安装的安卓系统盒子&#xff0c;iOS盒子不讲。怎么看电视盒子能不能安装第三方&#xff1f;很简单&#xff0c;方法很多&#xff0c;最常见就是用装有apk文件的u盘连接盒…