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

 更新时间:2018年08月14日 09:49:06   作者:MQ-HZ  
今天小编就为大家分享一篇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数据并详细解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • AJAX和三层架构实现分页功能具体思路及代码

    AJAX和三层架构实现分页功能具体思路及代码

    本文涉及到AJAX和三层架构方面的知识,在学习分页的同时也巩固了一下它们的相关知识,适合初学者的你
    2013-05-05
  • 利用H5特性FormData实现不刷新文件上传

    利用H5特性FormData实现不刷新文件上传

    之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种JS库,附带多图上传,预览,甚至是图片处理等特技。下面看小编给大家分享的利用H5特性FormData实现不刷新文件上传,非常实用,小伙伴一起来看看吧
    2015-09-09
  • 使用Ajax技术通过XMLHttpRequest对象完成首页登录功能

    使用Ajax技术通过XMLHttpRequest对象完成首页登录功能

    这篇文章主要介绍了使用Ajax技术通过XMLHttpRequest对象完成首页登录功能,很不错的尝试,需要的朋友可以参考下
    2014-08-08
  • ajax 服务器文本框自动填值

    ajax 服务器文本框自动填值

    最近二天。项目做完了。闲着没事做就自己写了一点东西。在写的过程中。发现利用服务器的文本框去查找用户的相关信息的时刻总要去刷新页面。
    2009-06-06
  • ajax 异步获取数据实现代码 (js创建ajax对象)

    ajax 异步获取数据实现代码 (js创建ajax对象)

    ajax实现异步获取数据代码,非常不错,大家可以参考下,这个是应用于用户名的实时监测。
    2009-11-11
  • React+ajax+java实现上传图片并预览功能

    React+ajax+java实现上传图片并预览功能

    这篇文章主要介绍了React+ajax+java实现上传图片并预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载

    jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载

    有同学问我如何实现一个像美丽说那样的“我喜欢”评级功能,当用户看到自己喜欢的图片或文章时,点击“红心”按钮,系统会自动记录用户的点击,并将总数加1。这样再结合不同的系统,可以将此功能应用到投票或收藏商品中去(如淘宝的收藏商品)。
    2015-10-10
  • 基于ajax的简单搜索实现方法

    基于ajax的简单搜索实现方法

    这篇文章主要介绍了基于ajax的简单搜索实现方法,结合实例形式较为详细的分析了ajax调用实现搜索功能的具体步骤与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • ajax遍历xml文档的方法

    ajax遍历xml文档的方法

    这篇文章主要介绍了ajax遍历xml文档的方法,实例分析了jsp结合Ajax遍历XML文档的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JQuery Ajax动态生成Table表格

    JQuery Ajax动态生成Table表格

    实现过程是这样的:前台通过jquery的ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里。感兴趣的朋友一起看看吧
    2015-09-09

最新评论