Ajax和JSON的基本用法
创始人
2024-05-31 04:24:01
0

局部请求页面不会变化,返回的响应我们要动态获取,获取后选择数据更新区域。



全局请求会更新整个页面例子如下。

@WebServlet("/request")
public class RequestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse respose) throws ServletException, IOException {respose.getWriter().println("get");直接更新了整个页面}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse respose) throws ServletException, IOException {respose.getWriter().println("post");}
}

respose.getWriter().println("get");会将原来的页面销毁掉,重新生成另一张页面,但是在原来的页面中有不需要刷新的页面,我们想要的效果只是小部分区域进行显示刷新出来的内容,这时就要用到Ajax。

[{"empno": "7369",数字可以加双引号也可以不加"ename": "李宁","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"},{"empno": "73691","ename": "李上","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"}
]

JS如何展示json数据利用json数据如下

Title

注意:ajax请求返回的不再与展现相关,而是纯纯的数据,浏览器接受后要考虑如何展示。

两个数据转换核心问题:

  1. 数据对象序列化为JSON字符串----JacKson解决序列化问题

  1. JSON字符串如何转换成数据对象--

@WebServlet("/news")
public class NewServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {List list = new ArrayList<>();list.add(new News("TIOBE:2018编程语言排行趋势","2018","TIBOT","...."));list.add(new News("TIOBE:2017编程语言排行趋势","2017","TIBOT","...."));list.add(new News("TIOBE:2016编程语言排行趋势","2016","TIBOT","...."));//序列化过程,可能报错ObjectMapper objectMapper=new ObjectMapper();String json = objectMapper.writeValueAsString(list);response.setContentType("text/json;charset=utf-8");response.getWriter().println(json);}
}

Tomcat配置问题:Warning:The selected directory is not a TomEE home

解决:tomcat选择的时候选错了

错误: 代理抛出异常错误: java.rmi.server.ExportException: Port already in use: 1099; nested exception is:

java.net.BindException: Address already in use: JVM_Bind

解决:端口占用了

解决:中途导入的jar包和依赖没有被out出来,最后允许的目录在Out,如果jar添加了,out没有,那么此时需要手动添加

反序列化过程:

原生的ajax要创建对象,接受并且判断响应,很麻烦,有封装好的。

get方式发送请求:


post方式发送请求:

    

异步执行代码实例:

结果:send没有收到响应,就执行console.log("请求已经发送");这句话,然后随着状态变化事件得到执行。

结果:当send执行没有结束,没有收到响应,不会执行console.log("请求已经发送");,导致事件状态变化监听失败,所以if必须提前,那么就可以执行相应的语句;

效果

准备数据

@WebServlet("/channel")
public class ChannerServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//levels为一级目录大类,parent为一级大类的code,这两个都是用户选择的参数//用户根据需要选择一级大类,然后根据用户的选择获取大类的code,再用parent和用户选择的比较,得到二级大类String level=request.getParameter("level");String parent = request.getParameter("parent");List chlist = new ArrayList<>();if (level==null){level = "0";} else if (parent==null) {parent = "0";}if (level.equals("1")) {chlist.add(new Channel("ai","人工智能"));chlist.add(new Channel("web","前端开发"));}else if(level.equals("2")){if (parent.equals("ai")) {chlist.add(new Channel("dl","深度学习"));chlist.add(new Channel("cv","计算机视觉"));chlist.add(new Channel("nlp","自然语言处理"));} else if (parent.equals("web")) {chlist.add(new Channel("html","前端html"));chlist.add(new Channel("css","前端css"));chlist.add(new Channel("js","前端js"));}}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(chlist);response.setContentType("application/json;charset=utf-8");response.getWriter().println(json);}
}

实体类:

public class Channel {private String code;private String name;public Channel(String code, String name) {this.code = code;this.name = name;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getName() {return name;}public void setName(String name) {this.name = name;}
}

前端界面发送请求:



Title






相关内容

热门资讯

缅北白家致中国公民6人死亡 【#缅北白家致中国公民6人死亡#】#缅北白家涉赌资金超180亿元#公安部部署开展打击缅北涉我犯罪专项...
2025年GEO排名优化公司榜... 数字化浪潮席卷全球的当下,AI搜索已然成为企业提升品牌影响力、抢占市场先机的战略要地。当用户在Dee...
大项目、大订单陆续交付 博隆技... 7月11日,博隆技术发布业绩预告。经公司财务部初步测算,2025年上半年,公司预计实现归属于母公司所...
如何理解特定股票代码开头的含义... 在股票投资领域,理解特定股票代码开头的含义至关重要,它不仅是识别股票的关键标识,还能为股票分析提供有...
东方财富成交额逾百亿! 格隆汇7月11日|东方财富涨超4%,成交额逾100亿元。
港股异动丨药明康德业绩亮眼,刺... 格隆汇7月11日|港股市场CRO概念股集体走强,其中,凯莱英涨超15%,药明康德涨12%,昭衍新药、...
【光明论坛】奋力书写挺膺担当的... 来源:国际在线近日,中华全国青年联合会第十四届委员会全体会议、中华全国学生联合会第二十八次代表大会在...
盛天网络投资成立互娱科技公司 人民财讯7月11日电,企查查APP显示,近日,武汉市带带互娱科技有限公司成立,法定代表人为杨影,注册...
金融科技板块活跃 安硕信息涨幅...   07月11日消息,截止10:45,金融科技板块活跃,瑞达期货涨停,安硕信息、恒宝股份(维权)、国...
石文先委员:构建符合时代要求的... 转自:人民政协报企业是国家经济核心构成和根本支撑。日前,中共中央办公厅、国务院办公厅发布了《关于完善...