html页面一闪而过，表单重复提交----牢记为button设置type=“button”

原本是想做一个简单的ajax登录，如果登录失败的话就向<span>标签中写入登录的失败的原因，结果页面上的内容一闪而过，令我百思不得其解。

最后终于发现这一行代码：

<button id="btn">登录</button><br/>

因为，button写在了表单里，没有设置type="button",所以默认是type=“submit”，点击的时候会提交两次请求（JQuery提交一次，按钮提交一次），导致第一次请求结束后页面刷新，通过JQuery写的内容也就一闪而过。

本小白已经是第二次在这上面受挫了，希望能看到人要牢记。下面是我做的实例的正确代码（没有连接数据库，只是见简单的测试）：

所需要的资源和使用笔记在我的资源中有，不过需要5积分（现在没办法设置为免费下载了），可以到其他地方下载。

前端：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").click(function(){
			$.ajax({
				url:"servlet3",
				type:"POST",
				data:$("form").serialize(),
				//cache: false,
				success:function(msg){
					if(msg.status == "success"){
						location.href="http://www.baidu.com";
					}else{
						$("span").text(msg.reason);
					}
				}
			});
		});
	});
</script>
</head>
<body>
<form>
	
	用户名:<input type= "text" name="userName" placeholder="userName"/><br/>
	密码:<input type= "password" name="password" placeholder="password"/><br/>
	<button id="btn">登录</button><br/>
	
</form>	
<span style="color:read;font-size;30px"></span>
</body>
</html>

后端servlet：

package com.qfedu.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

@WebServlet("/servlet3")
public class AjaxServlet3 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("来自ajax星球的请求");
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		System.out.println(userName+","+password);
		Map<String,String> map = new HashMap<String,String>();
		if(userName.equals("admin") && password.equals("admin")) {
			map.put("status", "success");
		}else {
			map.put("status", "fail");
			map.put("reason", "用户名或密码错误");
		}
		ObjectMapper mapper = new ObjectMapper();
		String jsonStr = mapper.writeValueAsString(map);
		response.setContentType("application/json;charset=utf-8");
		response.getWriter().write(jsonStr);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request,response);
	}

}