AJAX请求,返回json进行页面绑值

  • 后台 controller

      @RequestMapping(value = "backjson.do",method=RequestMethod.POST,
    
  produces = "application/json;charset=UTF-8")
    
  @ResponseBody
    
  public JSONObject logout(HttpServletRequest request, HttpServletResponse response) {
    
  String Name = request.getParameter("name");
    
  String Phone = request.getParameter("phone");
    
  System.out.println(Name);
    
  System.out.println(Phone);
    
  System.out.println("进行返回json");
    
  String jsonStr = "{\"meta\":{\"success\":true,\"message\":\"OK\"},\"data\":\"退出成功\"}";
    
  JSONObject jsonObj = JSONObject.fromObject(jsonStr);
    
  return jsonObj;
    
  }

  • 前台代码：

    index.html

      <!DOCTYPE html>
    
  <html>
    
  <head>
    
  <meta charset="UTF-8">
    
  <title>去往含有ajax的页面</title>
    
  </head>
    
  <body>
    
  <a href="queryList.html"><button type="button">点我!</button></a>
    
  </body>
    
  </html>

    queryList.html

      <!DOCTYPE html>
    
  <html>
    
  <head>
    
  <meta charset="UTF-8">
    
  <title>AJAX请求,返回json进行页面绑值</title>
    
  </head>
    
  <script src="js/jquery.js"></script>
    
  <script>
    
  var name = "测试";                          //测试与后台的连通性
    
  var phone = "1234";
    
  /* ajax请求 */
    
  $.ajax({
    
  url : "http://localhost:8080/Ajax_demo/backjson.do",
    
  type : "post",
    
  data : {
    
  	"name" : name,
    
  	"phone" : phone,
    
  },
    
  dataType : "json",
    
  success : function(data) {
    
  	//alert(data);
    
  	//console.log(data);
    
  	//alert(data.meta.message);
    
  	for ( var key in data) {
    
  		var html = '<table border=1>';
    
  		if (key == "meta") {
    
  			for ( var key1 in data[key]) {
    
  				console.log(data[key][key1]);
    
  				//alert(key1+":"+data[key][key1]);
    
  				var obj = data[key][key1];
    
  				html += '<tr>'
    
  				html += '<td>' + key1 + ":" + '</td>';
    
  				html += '<td>' + obj + '</td>';
    
  				html += '</tr>'
    
  			}
    
  			html += '</table>';
    
  			console.log(html);
    
  			$('#div1').append(html);
    
  		}

  		//赋值到表格与div
    
  		//$("#table tr").eq(1).find("td").html("111");  //添加到第一行
    
  		$("#td1").html(data[key].success); //绑定数据
    
  		$("#td2").html(data[key].message);
    
  		$(".top").val("1234"); //给input表单绑定数据
    
  		$(".bottom").html("1234"); //给div绑定数据
    
  		$(".foot").html(key + ":" + data[key]); //给div绑定数据
    
  		//alert(key+":"+data[key]);
    
  		}
    
  	}
    
  	});
    
  </script>
    
  <body>
    
  测试
    
  <hr width="100%">
    
  <br />
    
  	<div id="div1"></div>
    
  <hr width="100%">
    
  <br />
    
  <table border="1" id="table">
    
  <tr>
    
  	<td>success:</td>
    
  	<td id="td1"></td>
    
  	<td>message:</td>
    
  	<td id="td2"></td>
    
  </tr>

  <!-- <tr>
    
  				<td></td>  <td></td>
    
  				<td></td>  <td></td>
    
  				</tr> -->
    
  </table>
    
  <hr width="100%">
    
  <br />
    
  	<input type="text" class="top" />

  <hr width="100%">
    
  <br />
    
  	<div class="bottom"></div>
    
  <hr width="100%">
    
  <br />
    
  	<div class="foot"></div>
    
  </body>
    
  </html>

AJAX请求,返回json进行页面绑值的更多相关文章

  1. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  2. ajax请求返回json字符串/json对象 处理

    1. 返回json字符串如何处理 $.ajax({ url:xxx, success:function(date){ }, error:function(){ } }); 通过最原始的返回: Prin ...

  3. 使用jQuery发送POST，Ajax请求返回JSON格式数据

    问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...

  4. AJAX请求返回JSON数据动态生成html

    1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...

  5. jsp Ajax请求(返回json数据类型)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. ajax请求返回Json字符串运用highcharts数据图表展现数据

    [1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...

  7. 解决ajax请求返回Json无法解析"\"字符的问题

    原因:获取身份证信息,涉及图片路径,存在“\”字符,导致Json解析错误 解决思路:将返回类型从"json"改成"text",此时返回的数据类型变成字符串,将字 ...

  8. ajax请求返回json数据弹出下载框的解决方法

    将返回的Content-Type由application/json改为text/html. 在struts2下: <action name="XXXAjax" class=& ...

  9. Ajax--json（Ajax调用返回json封装代码、格式及注意事项）

    Ajax调用json封装代码<dbda.php>: //Ajax调用返回JSON public function JsonQuery($sql,$type=1,$db="mydb ...

随机推荐

  1. identityserver4踩坑总结

    1.在配置id4服务端的时候要注意client里面的 AllowedScopes开放的值要和GetIdentityResources中加入的值是一样的,不然调用以后报{"error" ...

  2. Python 进阶_OOP 面向对象编程_组合与继承

    #目录 前言 组合 派生 通过继承来覆盖重载方法 最常用的重载场景实例方法的重载 从标准类中派生类方法的重载 前言 我们定义一个类是希望能够把类当成模块来使用,并把类嵌入到我们的应用代码中,与其他的数 ...

  3. Scrum 指南总结

    https://wenku.baidu.com/view/86e0979176eeaeaad1f3305a.html 原文地址:

  4. linux在二进制文件中查找pattern的offset

    参考:http://stackoverflow.com/questions/14141008/grep-offset-of-ascii-string-from-binary-file strings ...

  5. 10分钟掌握Python-机器学习小项目

    学习机器学习相关技术的最好方式就是先自己设计和完成一些小项目. Python 是一种非常流行和强大的解释性编程语言.不像 R 语言,Python 是个很完整的语言和平台,你既可以用来做研发,也可以用来 ...

  6. java反射(三)--反射与操作类

    一.反射与操作类 在反射机制的处理过程之中不仅仅只是一个实例化对象的处理操作,更多的情况下还有类的组成的操作,任何一个类的基本组成结构:父类(父接口),包,属性,方法(构造方法,普通方法)--获取类的 ...

  7. K8S入门系列之必备扩展组件--> coredns(四)

    摘要: 集群其他组件全部完成后我们应当部署集群 DNS 使 service 等能够正常解析,1.11版本coredns已经取代kube-dns成为集群默认dns. https://github.com ...

  8. 初学Vue

    指令.组件.数据 指令 指令带有前缀,v-表示它们是Vue提供的特殊属性.如: v-bind:绑定元素属性,如:v-bind:title v-if:条件,绑定DOM 的结构 v-for:循环,使用Ar ...

  9. 启动数据库报：ORA-03113

    1启动数据库报:ORA-03113 2.查看oracle运行日志 tail  -50 //home/app/oracle/diag/rdbms/orcl/orcl/trace/alert_orcl.l ...

  10. 【串线篇】SpringMVC运行流程

    1.所有请求,前端控制器(DispatcherServlet)收到请求,调用doDispatch进行处理 2.根据HandlerMapping中保存的请求映射信息找到,处理当前请求的,处理器执行链(包 ...