jQuery封装Ajax,java对象转json_羡羡ˇ

大大的周 02-07 5464

Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和 XML）为什么要采用异步的方式来给后端发送请求呢? 介绍异步之前, 我们先来了解同步的方式这里我们做一个示例 :?  <form action="ServletDemo" method="post"> 账号 : <input type="text" name="account"> <input type="submit" value="提交"> </form> @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String account = req.getParameter("account"); resp.setContentType("text/html;charset=utf-8"); PrintWriter out = resp.getWriter(); out.print("返回的信息"); }

运行 :

点击提交 :

可以看到 , 信息虽然被成功返回, 但是返回的信息直接覆盖了原来的页面

这就是同步的发送方式, 在向后端发送请求得到返回的信息之前?, 此时页面会等待返回的信息, 在此期间好比处于待机状态 , 然后接收到返回的信息直接将页面覆盖

所以这里我们采用异步的方式 - ajax?

这里相当于浏览器不会处于待机状态, 单独去发送一个请求与服务器交互, 这样页面便不会出现变化,我们只需要处理返回的信息即可

这里我们直接介绍 jQuery封装后的 ajax , jQuery是一个封装了JavaScript的轻量级库, 语法更加简洁, 功能强大?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /*采用JQuery封装的ajax*/ function method(){ // 包含$.get()和$.post(),这里使用$.post(), 里面有四个参数 // 参数1 : web.xml里配置的访问地址参数2 : 序列化表单 // 参数3 : 回调的方法参数4 : 转json格式 $.post("ServletDemo",$("#formId").serialize(),function (res) { alert(res.account+":"+res.id) },"json") } </script> </head> <body> <form id="formId"> 账号 : <input type="text" name="account"> <input type="button" value="提交" onclick="method()"> </form>  </body> </html

这里我们介绍什么是json?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式我们后端传过去的是一个java对象, 浏览器识别不了java对象 , 所以我们需要把java对象转为js对象这样我们的前端请求就完成了, 现在来看后端 public class User { private Integer id ; private String account; public User() { this.id = 1; } public String getAccount() { return account; } public void setAccount(String account) { this.account = account; } }

先建一个User类

另外需要注意 , 我们这里需要一个Gson的 jar 文件, 和导入mysql与Servlet一样, 这里我们最终将java 对象转为 js 对象需要导入这样一个jar包

? ? ?

可以去百度下载

导入 jar 并使用

public class ServletDemo extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String account = req.getParameter("account"); //创建User对象来保存传入的一个account User user = new User(); user.setAccount(account); resp.setContentType("text/html;charset=utf-8"); PrintWriter out = resp.getWriter(); // 利用Gson类中的toJson()方法转json out.print(new Gson().toJson(user)); } }

?运行 :

结果 :

消息被成功加载 ?