Servlet、AJAX,JSON操作（一）

xiaoxiao2022-07-15 157

在html页面中使用AJAX传递数据到Servlet,使用JSON数据格式进行交互

Html

使用了jquery中的ajax操作方法中的$ajax和 $(obj).load方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function () { $("#b").click(function () { $("#pp").html("<h1>你也好</h1>"); $("#i").val("no"); $("#p").load("/ServletAjax","get",function (resText,statusText) { alert(resText) }) }) } ); $(document).ready(function () { $("#bb").click(function () { $.ajax({ url:"/ServletAjax", type:"post", data:"username=jack", dataType:"html", success:function (data) { $("#hh").html(data) }, error:function () { alert("失败了、、") } }) }) } ); $(document).ready(function () { $("#bbb").click(function () { $.ajax({ url:"/ServletAjax", type:"post", data:{"name":"Tom","age":18}, dataType:"json", success:function (data) { alert(data.name) }, error:function () { alert("失败了、、") } }) }) }) </script> </head> <body> <p id="pp">大家好！</p> <button id="b"> Go</button> <input id="i" value="yes"> <h2 id="p">load方法</h2> <br> <br> <br> <button id="bb">Go Go</button> <h2 id="hh">收到数据。。。。。</h2> <br> <br> <br> <br> <br> <button id="bbb">Go Go Go</button> <h2 id="hhh">Json数据呀</h2> </body> </html>

使用了Jquery的ajax方法，jQuery提供了一些简单的操作，大致有四种方法比较好用

$obj.load(url[,data] [,callback])

作用：远程加载数据并加载到 $obj 元素中 url:远程请求的地址 data:要传递的参数 callback:请求和响应完成之后的回调函数

function(resText, statusText){ resText: 响应回来的文本; statusText: 响应回来的状态文本 }

$.ajax()

$.ajax({}); {}: 请求的相关参数; 1.url: 字符串，表示异步请求方式的地址; 2.type: 字符串，表示请求方式 get 或 post; 3.data: 传递到服务器的参数; 可以是字符串： "uname=wang&age=30"; 可以是 json; 4.dataType: 字符串，表示服务器响应回来的数据的格式; 1.html 2.xml 3.text 4.script 5.json 6.jsonp: 跨域时使用; 5.async: 布尔类型，表示是否采用异步方式 true是异步 6.success: 回调函数，请求和响应成功后的操作 function(data){} data 表示响应回来的数据 7.error: 回调函数，请求或响应失败时要回来执行的操作 8.beforeSend: 回调函数，发送ajax请求之前要执行的操作如果 return false 则表示终止发送请求

$obj.get(url[,data] [,callback], [, type])

$obj.post(url[,data] [,callback], [, type])

就是确定方式的$ajax方法 url:远程请求的地址 data:要传递的参数（可选） callback:请求和响应完成之后的回调函数

function(resText){ resText: 响应回来的文本; }

type:响应回来的数据的数据类型 1.html：响应回来的文本当成 HTML 文本处理 2.text：响应回来的文本当成 text 文本处理 3.json：响应回来的文本当成 JSON 处理（转换成 js 对象）

实体类User

在服务器端使用的是Jackson这个库来转换json

public class User { private String name; private String age; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAge() { return age; } public void setAge(String age) { this.age = age; } }

Servlet

这个Servlet的post和get方法都被使用了

import com.fasterxml.jackson.databind.ObjectMapper; 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; @WebServlet("/ServletAjax") public class ServletAjax extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); String name=request.getParameter("name"); String age=request.getParameter("age"); System.out.println("用户名："+name); System.out.println("年龄："+age); User user=new User(); user.setName(name); user.setAge(age); ObjectMapper objectMapper=new ObjectMapper(); String json=objectMapper.writeValueAsString(user); System.out.println(json); response.getWriter().write(json); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); User user=new User(); user.setName("Jam"); user.setAge("21"); ObjectMapper objectMapper=new ObjectMapper(); String json=objectMapper.writeValueAsString(user); System.out.println(json); response.getWriter().write(json); } }

最新回复(0)