总结jQuery中ajax,post和get用法_jquery ajax post例子-优快云博客

本文链接：https://blog.youkuaiyun.com/springyh/article/details/80508215

本文介绍了如何使用Ajax、post及get方法从前端向后端发送请求并处理返回的数据，通过具体的JavaScript代码示例展示了如何实现这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不擅长前端页面开发,许久不用,有点忘记了,上午敲了两个demo,总结一下.

思路:前台页面使用ajax发送请求,请求控制器,控制器调用mapper,查询到数据后,以json格式返回给前端页面.在前端页面遍历显示出来.

实例一:使用$.ajax()

$.ajax({
			"url":"${pageContext.request.contextPath }/list",
			"type":"get",
			success:function(data){
				var result = "";
				for(var i=0;i<data.length;i++){
					result +="<tr>";
					result +="<td>"+data[i].id+"</td>";
					result +="<td>"+data[i].name+"</td>";
					result +="</tr>";
				}
				$("#mytbody").html(result);
			},
			"dataType":"json"
		});

实例二:使用$.post()

$.post(
		"${pageContext.request.contextPath }/list",
		"post",
		function(data){
			var result = "";
			for(var i=0;i<data.length;i++){
				result +="<tr>";
				result +="<td>"+data[i].id+"</td>";
				result +="<td>"+data[i].name+"</td>";
				result +="</tr>";
			}
			$("#mytbody").html(result);
		},
		"json"
		);

实例二:使用$.get()

$.get(
			"${pageContext.request.contextPath }/list",
			"get",
			function(data){
				var result = "";
				for(var i=0;i<data.length;i++){
					result += "<tr>";
					result += "<td>"+data[i].id+"</td>";
					result += "<td>"+data[i].name+"</td>";
					result += "</tr>";
				}
				$(#mytbody#mytbody).html(result);
			},
			"json"
		);

总结1:$.ajax({})格式,里面有花括号,例如

$.ajax({

"url":"list",

"type":"post",

success:function(data){},

"dataType":"json"

});

前面的双引号可以省略,即

$.ajax({

url:"list",

type:"post",

data:{"id":1,"name":"zhangsan"};