ajax servlet vue,ajax调后台servlet,把返回json用vue做绑定

本文介绍了如何在一个项目中,从原本使用Bootstrap和jQuery的架构转向采用Vue.js来实现更清晰的数据绑定。通过创建一个Servlet来提供数据,展示了一个Servlet+Bootstrap+jQuery+Vue.js的整合示例。在Servlet中,作者生成了商品数据并返回给前端。然而,页面代码中需要注意,虽然设置了dataType为'json',但响应仍为'text',需要在前端使用JSON.parse转换。最终,成功实现了前后端数据交互并展示了Vue.js的数据绑定功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 描述

最近项目需要开发微信手机端,本来用的架构是bootstrap+jquery,但每次数据绑定前台的时候jquery都把javascript代码和html代码混着写,违背业务与界面相分离的原则,希望找个轻量级的数据绑定js架构,觉得vue.js是个不错的选择,这里做个小demo把servlet+bootstrap+jquery+vue整合在一起。

2. 所需jar包

3. 项目结构

bb5e81c1199cf998149793076adedab6.png

4. 创建servlet

<?xml version="1.0" encoding="UTF-8"?> VueDatagridLoadDataServletLoadDataServletcom.vue.datagrid.LoadDataServletLoadDataServlet/LoadDataServlet.do

1

2

3

4

5

6

7

8

9

10

11

12

13

14

5. 编写servlet代码

package com.vue.datagrid; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; public class LoadDataServlet extends HttpServlet { private static final long serialVersionUID = 1L; public LoadDataServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8;pageEncoding=UTF-8"); response.setCharacterEncoding("UTF-8"); Goods goods1 = new Goods(); goods1.setId("1"); goods1.setBarcode("101"); goods1.setName("中华面粉"); goods1.setShortName("面粉"); Goods goods2 = new Goods(); goods2.setId("2"); goods2.setBarcode("102"); goods2.setName("中华面包"); goods2.setShortName("面包"); Goods goods3 = new Goods(); goods3.setId("3"); goods3.setBarcode("103"); goods3.setName("中华面条"); goods3.setShortName("面条"); List goodList = new ArrayList(); goodList.add(goods1); goodList.add(goods2); goodList.add(goods3); PrintWriter out = response.getWriter(); try { String json = JSONObject.toJSONString(goodList); System.out.println("json:" + json); out.write(json); } catch (Exception e) { e.printStackTrace(); } finally { out.flush(); out.close(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

6. 编写页面代码

页面代码有个坑,弄了很久才弄出来,但还是不知所以然。在ajax调用后台servlet时,已经设置了datatype:”json”,但servlet的printwriter处理后response的仍然是“text”,需要在success后加上JSON.parse(data)把字符串转成JSON类型,希望有哪位大神可以告诉缘由和告诉我怎么可以response JSON类型到前台。

Vue Bind Data

Vue demo

查询
ID名称条形码简称
{{goods.id}}{{goods.name}}{{goods.barcode}}{{goods.shortName}}
$(function() { $.ajax({ type:'get', url:'http://localhost:8080/VueDatagrid/LoadDataServlet.do', success: function(data){ if (data.success){ pushDom(data); }else{ alert("接口调用失败"); } }, error: function(data){ alert(JSON.stringify(data)); } }); function pushDom(data){ // 然后再交给 vue 进行渲染 var vm = new Vue({ el: '#app', data: data }); } })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

7. 运行程序

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值