我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的?

form表单:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div
style="width: 300px; padding: 20px; margin: 20px; border: 4px dashed #ccc;">
<form id="myform" name="myform" method="post" action="#">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="username" name="username" placeholder="请输入用户名"
onfocus="this.placeholder=''" onblur="this.placeholder='请输入用户名'" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="password" name="password" placeholder="请输入密码"
onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="提交"
onclick="doLogin('weixin');" /></td>
</tr>
</table>
<input type="hidden" name="loginType" id="loginType" value="weixin" />
</form> </div>
<div id="errMsg" style="color: red">${errMsg}</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function doLogin(type) {
$.ajax({
type : "GET",
url : "login.do",
data : {
username : $("#username").val(),
password : $("#password").val(),
type : type
},
dataType : "json", //预期服务器返回的数据
success : function(data) {
if (data.errCode < 0) {
alert("登录失败!")
$("#errMsg").show().html(data.errMsg).stop(true, true)
.fadeOut(3000);
} else {
//登录成功,做其他处理
alert("恭喜你,登录成功!");
}
}
});
}
</script>
</body>
</html>

  

LoginServlet

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("用户登录...");
System.out.println("开始存入map...");
Map<String,Object> map=StringUtils.getParameters(req);
System.out.println("存入map成功!");
System.out.println(map); if(StringUtils.isEmpty(map.get("username"))){
StringUtils.writeObject(resp, "{\"errCode\":-1,\"errMsg\":\"用户名不能为空!\"}");
System.out.println("用户名不能为空!");
return;
}
if(StringUtils.isEmpty(map.get("password"))){
StringUtils.writeObject(resp,"{\"errCode\":-2,\"errMsg\":\"密码不能为空!\"}");
System.out.println("密码不能为空!");
return;
}
System.out.println("登陆成功!");
StringUtils.writeObject(resp,"{\"errCode\":0,\"errMsg\":\"登录成功!\"}");
}

  

页面效果:

参考:https://www.cnblogs.com/skyblue-li/p/8251234.html

用Ajax请求后台数据的更多相关文章

  1. 前台返回json数据的常用方式+常用的AJAX请求后台数据方式

    我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

  2. JS 操作 HTML 和 AJAX 请求后台数据

    为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...

  3. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  4. Ajax请求后台数据

    一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...

  5. ajax 请求后台数据返回异常 及 提示404方法名不存在

    1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...

  6. 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据

    这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...

  7. jQuery Ajax请求后台数据并在前台接收

    1.ajax基本语法 <script> $(function(){ $('#sub').click(function(){ var username=$('#username').val( ...

  8. js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

  9. C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

随机推荐

  1. js对象 c#对象转换

    前台页面 js 创建对象 let t = {}; 数组对象 let c = []; c.push({}) ;// 添加对象 以string格式 传递 JSON JSON.stringify(c); c ...

  2. jQuery入门简述

    jQuery 是一套快速的,简洁的 javaScript 脚本库,jQuery 由美国人 John Resig 创建,至今已吸引了来自世界各地的众多 javaScript 高手加入其组织,使用户能更方 ...

  3. Python中带参数的装饰器

    装饰器本身是用来是为一个函数是实现新的功能,并且不改变原函数的代码以及调用方式. 遇到这样一种问题: 众多函数调用了你写的装饰器,但客户有需求说,我想实现我可以随之控制装饰器是否生效. 那你就不可能在 ...

  4. 常用的bug管理工具

    1. QC(Quality Center)是原Mercury Interactive公司(现已被HP收购)生产的企业级基于WEB測试管理工具,须要安装配置IIS和数据库.系统资源消耗比較 大:功能非常 ...

  5. MSPBSL_Scripter编译

    The BSL Scripter is a PC application that is available for Windows, Linux and Mac OS X. It is a user ...

  6. kafka连接storm问题

    遇到缺少jar包的报错,参考https://www.jianshu.com/p/70c3a7f56386 参考上面的链接把jar包都放到storm/lib目录下后,使用localCluster的方法提 ...

  7. Signal Processing and Pattern Recognition in Vision_15_RANSAC:Performance Evaluation of RANSAC Family——2009

    此部分是 计算机视觉中的信号处理与模式识别 与其说是讲述,不如说是一些经典文章的罗列以及自己的简单点评.与前一个版本不同的是,这次把所有的文章按类别归了类,并且增加了很多文献.分类的时候并没有按照传统 ...

  8. 2.Vue调试工具vue-devtools的安装步骤和使用

    1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可:

  9. 面对runc逃逸漏洞,华为云容器为您保驾护航

    背景信息 基于runc运行时的容器存在安全漏洞,攻击者可以通过恶意容器镜像等方式获取宿主机root执行权限.漏洞CVE-2019-5736的详细信息,请参见 https://cve.mitre.org ...

  10. Python计算AUC

    AUC(Area under curve)是机器学习常用的二分类评测手段,直接含义是ROC曲线下的面积.另一种解释是:随机抽出一对样本(一个正样本,一个负样本),然后用训练得到的分类器来对这两个样本进 ...