ajax动态加载json数据并详细解析

174 阅读 0 评论 115 点赞

我是靠谱客的博主纯情棒球，这篇文章主要介绍ajax动态加载json数据并详细解析，现在分享给大家，希望可以做个参考。

效果图

jsp代码

复制代码

1
2
3
4
5
6
7
8
<form >
   姓名：<input name="name" type="text"/>
   年龄：<input name="age" type="text"/>
   <input type="button" class="get" value="get提交"/>
   <input type="button" class="post" value="post提交"/>
   <input type="button" class="ajax" value="ajax提交"/>
   </form>
   <div id="box"></div>

servlet代码

复制代码

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
//get
public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  response.setContentType("text/html");
  response.setCharacterEncoding("utf-8");
  response.setContentType("text/html;charset=utf-8");
  String name = request.getParameter("name");
  String age = request.getParameter("age");
  if (name == null || name == "") {
   name = "测试名字admin";
  }

  if (age == null || age == "") {
   age = "测试年龄100";
  }
  user user = new user(1, name, age);
  PrintWriter out = response.getWriter();

  JSONObject jsonObj = JSONObject.fromObject(user);

  out.print(jsonObj);

  out.flush();
  out.close();
 }

复制代码

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
//post
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  // response.setContentType("text/html");

  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  response.setContentType("text/html;charset=utf-8");
  String name = request.getParameter("name");
  if (name == null || name == "") {
   name = "测试名字admin";
  }
  String age = request.getParameter("age");
  if (age == null || age == "") {
   age = "测试年龄100";
  }
  user user = new user(1, name, age);
  PrintWriter out = response.getWriter();

  JSONObject jsonObj = JSONObject.fromObject(user);

  out.print(jsonObj);

  out.flush();
  out.close();
 }

JS核心代码

复制代码

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
<script type="text/javascript">
  //get
 $(document).ready(function() {
  $('form .get').click(function() {
   $.get('ajaxServlet',function(response,status,xhr){
    var dataObj = eval("(" + response + ")");
    $("#box").html(response);
    alert(dataObj.name);

  });

 });
 //post
 $('form .post').click(function() {
   $.post('ajaxServlet',function(response,status,xhr){
    var dataObj = eval("(" + response + ")");
    $("#box").html(response);

  });

 });
 //ajax
 $('form .ajax').click(function() {
  alert($("[name='name']").val());
    $.ajax({
    type:'get',
    url:'ajaxServlet',
    data:{
    name:$("[name='name']").val(),
    age:$("[name='age']").val()
    },
    success:function(response, status, xhr){
    $("#box").html(response);}
    });

 });

 });

</script>