基于JQuery的Ajax+JSON（全）_听~宇

未知 02-07 3792

Asynchronous JavaScript And XML的缩写：异步的 JavaScript 和 XML AJAX

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有 JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.异步加载，客户端和服务器的数据交互更新在局部??的技术，不需要刷新整个??（局部刷新）

?优点： 1、局部刷新，效率更? 2、?户体验更好

?先用一个例子来开篇吧(jsp发起请求，Servlet接收

我们先来从同步开始讲，再到异步

全局刷新

?此时浏览器只能显示result.jsp页面，其他用户什么都看不到

怎么才能局部刷新呢，这里就要用到JQuery封装的??AJAX

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

开发中是用JQuery封装的AjaxJQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。语法：?

?引入JQuery封装的Ajax的js，引入还得ReBuild一下，不然out里没有该js资源

好了，我们来测试一下到底成功了没有（此时form表单提交方式已经被取代了）

基于 jQuery 的 AJAX，好了我们回到我们最开始的问题，怎么局部刷新呢

我们来举例子：一个添加电脑的表单，当用户填完电脑名后，他就进行局部刷新，JS函数去查看数据库是否有该电脑名，并对结果进行判断（前提要先引入jquery)

我们要有一个向数据库查询是否存在该电脑名的控制层

?addComputer.jsp(在这里面进行局部刷新）?

?跳转servlet进行判断

?来看一下结果

接下来我们再来写一个例子

补充一点JSON的知识（JS第九讲我写过）

JSON

JavaScript Object Notation，?种轻量级数据交互格式，完成 js 与 Java 等后端开发语?对象数据之间的转换

?首先导包吧

?先通过一个例子来引入它吧

一个User类

public class User { Integer id; String name; double score; @Override public String toString() { return "User{" + "id=" + id + ", name='" + name + '\'' + ", score=" + score + '}'; } public User(Integer id, String name, double score) { this.id = id; this.name = name; this.score = score; } }

一个ServletTest.java

一个jsp

运行情况

?通过输出Servlet拿到的data，我们能看到我们的User信息拿到了

但是我们如何在HTML页面来输出呢，这时就要用到JSON

一个ServletTest.java

@WebServlet("/test") public class ServletTest extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { User user = new User(1,"Bob",23.5); resp.setCharacterEncoding("UTF-8"); //将Java对象转换为JSON格式 JSONObject jsonObject = JSONObject.fromObject(user); resp.getWriter().write(jsonObject.toString()); } }

一个jsp

这个data其实是servlet? 传过来的

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ var btn = $("#btn"); btn.click(function(){ $.ajax({ url:'/test', type:'post', dataType:'json', success:function(data){ $("#id").val(data.id); $("#name").val(data.name); $("#score").val(data.score); } }); }); }) </script> <body> 编号：<input id="id" type="text"/><br/> 姓名：<input id="name" type="text"/><br/> 成绩：<input id="score" type="text"/><br/> <input id="btn" type="button" value="提交"/> </body> </html>

运行情况

再举一个查询json接收多个的例子

输出到浏览器是这种