我们先不讲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. C# 关于爬取网站数据遇到csrf-token的分析与解决

    需求 某航空公司物流单信息查询,是一个post请求.通过后台模拟POST HTTP请求发现无法获取页面数据,通过查看航空公司网站后,发现网站使用避免CSRF攻击机制,直接发挥40X错误. 关于CSRF ...

  2. springboot2.0介绍1

    SpringBoot 一. Spring介绍 1.1.SpringBoot简介 在您第1次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得 ...

  3. <script> 为什么不再使用 type="text/javascript" 【问题】

    1.为什么在 <script> 标签中不需要使用 type="text/javascript" 就可以写jQuery代码 ? <head> <scri ...

  4. 记录在苹果X手机上运行遇到的代码Dom被阻塞不更新的一个坑

    一.问题产生背景: 开发支付功能,代码逻辑如下:点击支付后,请求后台接口得到流水号以及第三方支付台链接,跳转支付台(在苹果手机则是弹出支付台层):支付完毕后返回支付页面,或中途退出支付台返回支付页面: ...

  5. C++ unordered_map桶增长规律

    无序容器unordered_map存储为一组桶,各元素通过hash函数映射到各个桶中.心血来潮,来看一下桶的增长规律. #include <iostream> #include <s ...

  6. leetcode-102.层序遍历二叉树(正序)· BTree

    题面 Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to rig ...

  7. 用js刷剑指offer(包含min函数的栈)

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 牛客网链接 js代码 const stack1 = [] const stack2 = ...

  8. 用js刷剑指offer(矩形覆盖)

    题目描述 我们可以用21的小矩形横着或者竖着去覆盖更大的矩形.请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 牛客网链接 思路 依旧是斐波那契数列 2 * n的大矩形,和n个 ...

  9. mysql运维相关

    1.为什么要分库分表(设计高并发系统的时候,数据库层面该如何设计)?用过哪些分库分表中间件?不同的分库分表中间件都有什么优点和缺点?2.现在有一个未分库分表的系统,未来要分库分表,如何设计才可以让系统 ...

  10. 【二进制优化-多重背包】zznu-oj-2120 : 安详--如何用尽钱币打赏主播获得最大好感度

    2120 : 安详 题目描述 spring最近喜欢上了B站新秀主播,身为顿顿吃黄焖鸡的土豪,当然要过去打赏一番,但是spring还是喜欢精打细算,所以在打赏的时候,想要掏出有限的钱,获得主播的最大好感 ...