前言:
如今小伙伴们对“ajax遍历json里的map”大概比较着重,兄弟们都想要学习一些“ajax遍历json里的map”的相关知识。那么小编同时在网摘上网罗了一些关于“ajax遍历json里的map””的相关资讯,希望朋友们能喜欢,各位老铁们快快来学习一下吧!一、标准请求响应浏览器动作;
视频加载中...
不管请求什么,请求到哪个路径文件,就返回哪个资源。
比如请求一份图片资源
浏览器得到
请求一段视频资源:
跳转的这个过程表示同步过程
浏览器请求什么资源,跟随显示什么资源’
二、Ajax-是一个异步请求
局部刷新。通过异步请求,请求到服务器资源数据后通过脚本来修改页面中的部分内容。
Ajax是由JS(javascript)推出的.
由JQuery对JS中Ajax代码进行封装和简化达到方便使用的效果。
三、分类
第一层 $.ajax()函数 $.ajax({属性名:值,属性名:值})
是Jquery中功能最全的,代码写起来相对最难的。
<script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> /* url:请求服务器地址 data:请求参数 dataType:服务器返回数据的类型 error:请求出错执行的功能 success:请求成功执行的功能,function(data) data是服务器返回的数据 type:请求方式 */ $(function(){ $("a").click(function(){ $.ajax({ url: "demo", data:{"name":"张三"}, dataType: "html", error:function(){ alert("请求出错。") }, success: function(data){ alert("请求成功"+data) }, type: "post" }) return false; }) }); </script>
当触发a 超链接时,向服务器请求demo(url),发送data,类型html,请求成功收到服务器数据。
这种第一层代码代码功能最全写起来麻烦
第二层:
$.get()
参数
url,[callback]String,FunctionV1.0
url:待载入 JS 文件地址。
callback:成功载入后回调函数。
$.post()
这两个相当于dataType,没有error
参数
url,[data],[callback],[type]String,Map,Function,StringV1.0
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
代码实例:改写成post
参数servlet接受
$.post是为了简化$.ajax
第三层(简化$.get())
$.getJSON(url,data,success),相当于设置$.get中 dataType="json"
$.getScript(url,data,success),相当于设置$.get中dataType="script"
如果服务器返回数据是从表中取出的数据,为了方便客服端操作返回的数据,服务器返回的数据设置成JSON
客户端把JSON当作成数据或数组操作
JSON是一种数据格式
JSONObject:JSON对象,理解成Java中对象
{"key":value,"key":value}
JSONArray:JSON数组
[{"key":value,"key":value},{"key":value,"key":value}]
JSON常用的工具除了goson还有
复制到项目
把User的Java对象转换为JSON
浏览器访问:
Ajax请求json数据
浏览器获得的数据
这是一个对象
Ajax获得数组
[{"id":2,"usernameString":"李四","passwordString":"122223"},{"id":1,"usernameString":"张三","passwordString":"123"}]
Ajax遍历循环数组
获得返回数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> /* url:请求服务器地址 data:请求参数 dataType:服务器返回数据的类型 error:请求出错执行的功能 success:请求成功执行的功能,function(data) data是服务器返回的数据 type:请求方式 */ $(function(){ $("a").click(function(){ /* $.ajax({ url: "demo", data:{"name":"张三"}, dataType: "html", error:function(){ alert("请求出错。") }, success: function(data){ alert("请求成功"+data) }, type: "post" }) */ $.post("demo",{"name":"张三"},function(data){ var result=""; for(var i=0;i<data.length;i++){ result+="<tr>"; result+="<td>"+data[i].id+"</td>"; result+="<td>"+data[i].usernameString+"</td>"; result+="<td>"+data[i].passwordString+"</td>"; result+="<tr/>"; } /*相当于先清空后添加 */ $("#mytbody").html(result) }) return false; }) }); </script> </head> <body> <a href="">跳转</a><br> <table border="1"> <thead></thead> <tr> <td>编号</td> <td>姓名</td> <td>密码</td> </tr> <tbody id="mytbody"></tbody> <tfoot></tfoot> </table> </body></html>
求关注,早日突破100粉目标
标签: #ajax遍历json里的map