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


            效果图



jsp代码





<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代码





//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();

 }









//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核心代码





<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>





以上这篇ajax动态加载json数据并详细解析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持中文源码网。