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数据并详细解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 浅析ajax请求json数据并用js解析(示例分析)

    自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp.net并没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了.事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会发现,最终asp.net的开发模式还是跟PHP.jsp等其它web开发模式是一样

  • jQuery使用ajax方法解析返回的json数据功能示例

    本文实例讲述了jQuery使用ajax方法解析返回的json数据功能.分享给大家供大家参考,具体如下: 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行.查了些资料,解释如下: $.ajax({ url: ajaxurl, type: "POST", success: function(data){ //假设返回的json数据里有status及info2个属性 //有时候可以直接ajaxo

  • AJAX和jQuery动态加载数据的实现方法

    什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON.简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容. 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服

  • jQuery Ajax异步处理Json数据详解

    先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result){    $.each(result, function(i, field){      $("div").append(field + " ");    });  });

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

    效果图 jsp代码 <form > 姓名:<input name="name" type="text"/> 年龄:<input name="age" type="text"/> <input type="button" class="get" value="get提交"/> <input type="bu

  • AJAX 动态加载后台数据 绑定select的方法

    直接上代码 是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 <select id="select" style="width : 80px;height : 30px;"> //下拉框数据动态加载 </select> js代码 $.ajax({ url: "", //后台webservice里的方法名称 contentType:

  • JQuery Ajax动态加载Table数据的实例讲解

    我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. <select id="type" name="type" onchange="reloadTable(this)"></select> <table id="import-table" class="table table-striped table-bordered table

  • 解决Ajax加载JSon数据中文乱码问题

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { enable: true, url: basePath + '/sysMenu/listSysMenu', autoParam: ["id=parentId"] } SpringMvc中文字符处理: Java代码 <mvc:annotation-driven> <mvc

  • python爬取Ajax动态加载网页过程解析

    常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 :网站根据IP地址访问频率进行反爬,短时间内进制IP访问 解决方案: 1.构造自己IP代理池,每次访问随机选择代理,经常更新代理池 2.购买开放代理或私密代理IP 3.降低爬取的速度 3.User-Agent限制 :类似于IP限制 解决方案: 构造自己的User-Agent池,每次访问随机选择 5.

  • JavaScript 通过Ajax 动态加载CheckBox复选框

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark

  • Python实现爬取网页中动态加载的数据

    在使用python爬虫技术采集数据信息时,经常会遇到在返回的网页信息中,无法抓取动态加载的可用数据.例如,获取某网页中,商品价格时就会出现此类现象.如下图所示.本文将实现爬取网页中类似的动态加载的数据. 1. 那么什么是动态加载的数据? 我们通过requests模块进行数据爬取无法每次都是可见即可得,有些数据是通过非浏览器地址栏中的url请求得到的.而是通过其他请求请求到的数据,那么这些通过其他请求请求到的数据就是动态加载的数据.(猜测有可能是js代码当咱们访问此页面时就会发送得get请求,到其

  • vue+layui实现select动态加载后台数据的例子

    刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的 后来就想办法 等vue数据渲染完 再渲染layui form 试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染 这种方式有一个小问题 有时候会提示render方法未定义 可能是由于执行顺序原因 vue先执行了 最后把vue代码放到layui.use里面 问题解决 可能不是最好的实现方式 如有更好的实现方式欢迎指出 共同进步 页面代码 <div id="demo"

  • Python中使用json.load()和json.loads()加载json数据的方法实例

    目录 前言 预备知识: 使用方法 总结 前言 最近在python里面用json读取json文件,可是老是不成功,特此记录一下. 预备知识: def load(fp, cls=None, object_hook=None, parse_float=None, parse_int=None, parse_constant=None, object_pairs_hook=None, **kw): """Deserialize ``fp`` (a ``.read()``-suppor

  • 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

    看了"使用hibernate实现树形结构无限级分类"这篇文章后,我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享.其实在我的博客里是老早贴出来的,由于时间关系没好好整理.        功能模块树是几乎在每个项目里都要用到的东西,利用Dojo的好处就是可以实现树的子节点的动态加载,这在树节点很多的情况下是很有用的.         下载附件二dojotree.rar,解压后将dist\dojotree.war部署到应用服务器即可浏览DE

随机推荐