龙空技术网

Ajax复习

又双叒叕是程序汪 307

前言:

如今小伙伴们对“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