前端使用Ajax发送数据到servlet
$.ajax({
type:"post"//规定请求的类型（GET 或 POST）,
url:"urlservlet"//规定发送请求的 URL。默认是当前页面,
success:fun(result,status,xhr) //当请求成功时运行的函数,
error:fun(xhr,status,error) //如果请求失败要运行的函数。
dataType:"json"预期的服务器响应的数据类型,
contentType:""//发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
beforeSend:fun(xhr) //发送请求前运行的函数。
async:"true"//布尔值，表示请求是否异步处理。默认是 true。
})
contentType
application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctyped 等于这个值。
application/json
POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8
{"title":"test","sub":[1,2,3]}
text/xml
POST http://www.example.com HTTP/1.1
Content-Type: text/xml
<?xml version="1.0"?>
<methodCall>
<methodName>examples.getStateName</methodName>
<params>
<param>
<value><i4>41</i4></value>
</param>
</params>
</methodCall>
datatype
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。
可用值:
- "xml": 返回 XML 文档，可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 - "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，
如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 - "text": 返回纯文本字符串
servlet使用out内置对象，实现sucess接受数据
datatype = text
response.setCharacterEncoding("utf-8");
response.setContentType("text;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(1);
out.flush();
out.close();
datatype = json
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
JSONObject jobj = new JSONObject();
jobj.put("result",true);
PrintWriter out = response.getWriter();
out.append(jobj.toString());
out.close();
//sucess回调函数 alert(data.result);
HTML
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-3.3.1/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<form >
邮件：<input type="text" name="email" id="email">
密码：<input type="password" name="pwd" id="pwd">
<input type="button" onclick="regsiter()" value="register">
</form>
</body>
</html>
JS
function regsiter() {
$.ajax({
type:"post",
url:"/BM/RegisterServlet",
data:{
email:$("#email").val(),
pwd:$("#pwd").val()
},
success:function (data) {
if( '1' == data ){
alert("注册成功，即将跳转登陆页面");
window.location.href="login.html";
}else if( '0' == data ){
alert("邮箱已存在，请重新注册!");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
})
}
Servlet
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 java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(request.getParameter("email"));
response.setCharacterEncoding("utf-8");
response.setContentType("text;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(1);
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
网友评论