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

  • 后台 controller

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

  • 前台代码：

    index.html

    1.   <!DOCTYPE html>
    2.   <html>
    3.   <head>
    4.   <meta charset="UTF-8">
    5.   <title>去往含有ajax的页面</title>
    6.   </head>
    7.   <body>
    8.   <a href="queryList.html"><button type="button">点我!</button></a>
    9.   </body>
    10.   </html>

    queryList.html

    1.   <!DOCTYPE html>
    2.   <html>
    3.   <head>
    4.   <meta charset="UTF-8">
    5.   <title>AJAX请求,返回json进行页面绑值</title>
    6.   </head>
    7.   <script src="js/jquery.js"></script>
    8.   <script>
    9.   var name = "测试";                          //测试与后台的连通性
    10.   var phone = "1234";
    11.   /* ajax请求 */
    12.   $.ajax({
    13.   url : "http://localhost:8080/Ajax_demo/backjson.do",
    14.   type : "post",
    15.   data : {
    16.   	"name" : name,
    17.   	"phone" : phone,
    18.   },
    19.   dataType : "json",
    20.   success : function(data) {
    21.   	//alert(data);
    22.   	//console.log(data);
    23.   	//alert(data.meta.message);
    24.   	for ( var key in data) {
    25.   		var html = '<table border=1>';
    26.   		if (key == "meta") {
    27.   			for ( var key1 in data[key]) {
    28.   				console.log(data[key][key1]);
    29.   				//alert(key1+":"+data[key][key1]);
    30.   				var obj = data[key][key1];
    31.   				html += '<tr>'
    32.   				html += '<td>' + key1 + ":" + '</td>';
    33.   				html += '<td>' + obj + '</td>';
    34.   				html += '</tr>'
    35.   			}
    36.   			html += '</table>';
    37.   			console.log(html);
    38.   			$('#div1').append(html);
    39.   		}
    41.   		//赋值到表格与div
    42.   		//$("#table tr").eq(1).find("td").html("111");  //添加到第一行
    43.   		$("#td1").html(data[key].success); //绑定数据
    44.   		$("#td2").html(data[key].message);
    45.   		$(".top").val("1234"); //给input表单绑定数据
    46.   		$(".bottom").html("1234"); //给div绑定数据
    47.   		$(".foot").html(key + ":" + data[key]); //给div绑定数据
    48.   		//alert(key+":"+data[key]);
    49.   		}
    50.   	}
    51.   	});
    52.   </script>
    53.   <body>
    54.   测试
    55.   <hr width="100%">
    56.   <br />
    57.   	<div id="div1"></div>
    58.   <hr width="100%">
    59.   <br />
    60.   <table border="1" id="table">
    61.   <tr>
    62.   	<td>success:</td>
    63.   	<td id="td1"></td>
    64.   	<td>message:</td>
    65.   	<td id="td2"></td>
    66.   </tr>
    68.   <!-- <tr>
    69.   				<td></td>  <td></td>
    70.   				<td></td>  <td></td>
    71.   				</tr> -->
    72.   </table>
    73.   <hr width="100%">
    74.   <br />
    75.   	<input type="text" class="top" />
    77.   <hr width="100%">
    78.   <br />
    79.   	<div class="bottom"></div>
    80.   <hr width="100%">
    81.   <br />
    82.   	<div class="foot"></div>
    83.   </body>
    84.   </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. VMware中对Linux虚拟机的网络配置静态IP的配置

    前言 踏出象牙塔,进入公司,由于公司的所有产品都是Linux下的,必然自己这段时间需要在自己的工作机器先学习一下.项目代码是用Source Insight进行查看的,总是Ctrl + Alt的切来切去 ...

  2. l1和l2正则化

    https://blog.csdn.net/tianguiyuyu/article/details/80438630 以上是莫烦对L1和L2的理解 l2正则:权重的平方和,也就是一个圆 l1正则:权重 ...

  3. python zip 压缩

    zipfile zip文件操作 引入模块: import zipfile zip文件格式是通用的文档压缩标准,在ziplib模块中,使用ZipFile类来操作zip文件,下面具体介绍一下: zipfi ...

  4. 利用程序随机构造N个已解答的数独棋盘

    高级软件工程第二次作业:利用程序随机构造N个已解答的数独棋盘,代码如下: package SudokuGame; /** * 解决这个问题使用的是回溯+剪枝的算法 * 基本思想:不断地将每个格子可填入 ...

  5. ORCAL 数据库的约束以及SQL语言的四种类型

    oracle数据库约束: 定义:要输入的这个值是一个什么样的值, 或者是哪个范围内的值 作用: 确保完整性, 确保精确性 1, 非空约束(not null) 记录一条信息的时候如果用户名和密码没有被记 ...

  6. Java开发用H2数据库

    #JPA Configuration:#spring.jpa.database=MySQLspring.datasource.url=jdbc:h2:mem:jpaspring.datasource. ...

  7. mysql数值字符串类型的按照数值进行排序

    今天遇到一个问题,就是对mysql数值字符串类型进行排序,在默认情况下使用order by 字段名称 desc/asc 进行排序的时候,mysql进行的排序规则是按照ASCII码进行排序的,并不会自动 ...

  8. 调试Xamarin.Android时出现缺少"Mono.Posix 2.0.0"的错误

    1.在http://originaldll.com/file/mono.posix.dll/31191.html中下载mono.posix 2.0.0 dll 2.以管理员权限运行Visual Stu ...

  9. pychrm和linux进行链接上传代码

    众享周知:现在在windows文件中我们有pycharm工具帮我们去编辑python脚本,这会省去我们大把的时间让我们进行更多的脚本编辑.有这样的一种方法,我们可以使用pycharm编辑的脚本上传到l ...

  10. PHP多选测试练习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...