Ajax技术复习---狂神笔记

最新推荐文章于 2022-04-06 14:08:15 发布

爱码～

最新推荐文章于 2022-04-06 14:08:15 发布

阅读量197

点赞数 1

分类专栏：苦练基本功文章标签： ajax javascript java

本文链接：https://blog.csdn.net/weixin_47120348/article/details/120090777

版权

苦练基本功专栏收录该内容

173 篇文章 1 订阅

订阅专栏

认识两个注解
1 @ResponseBody 作用是将后台数据java对象转化成json数据对象
2 @RequestBody作用是将前端传过来json对象转化成pojo对象，
Ajax
异步的javaScript和xml,能够局部刷新网页技术，
本质
Ajax的本质是XMLHttpRequest对象(xhr),xhr能够向服务器发送请求和解析服务器响应提供了接口，能够以异步的形式获取数据，
JQuery Ajax
JQuery 中封装了Ajax,本质上也是XMLHttpRequest.方便了调用，
方法有$.ajax(), $.get(), $.post(), $.getJSON(),
$.ajax()方法中通过data属性来存放提交的数据，支持json格式，data属性中可以存放两种方式指定提交数据，一种是key=vlaue，key =value ，另一种是js对象

<script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.ajax({
                type:"get",
                url:"jQuerajax.do",
                data:{ //js对象格式
                    id:userid,
                    name:username,
                },
                success:function(result){
                    var s = result.toString();
                    console.log(s);
                    $("#span").html(result);
                }
            })
        }
    </script>

想要在$.ajax()中提交json数据，需要使用post方式提交，

<script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.ajax({
                type:"post",
                url:"jQuerajax.do",
                dataType:"json",//将响应数据json对象转化成js对象
                data:JSON.stringify({ //将js对象转化成json对象
                   id:usernid,
                   name:username,
                }),
                success:function(result){
                  alert(result.id+""+result.name);
                }
            })
        }
    </script>

$.get()方法是 $.ajax()基于get方式发送异步请求的简化版
语法： $.get(url,function(result))
$.get(url,data,function(result))

<script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.get("url",{id:userid,name:username},function(result){//基于js对象方式传输数据
                $("#span").html(result);
            })
        }
    </script>

基于post

<script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.post("url",{id:userid,name:username},function(result){//基于js对象方式传输数据
                $("#span").html(result);
            })
        }
    </script>

$.getJSON()的使用
$.getJSON()是基于 $.ajax()方法的get方式发送请求，并将响应结果中的json数据自动转化成js对象，
要求返回的数据必须是json数据，

 <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            $.getJSON("url",{id:userid,name:username},function(result){
                $("#span").html(result.userid+""+result.username)
            })
        }
    </script>

serialize()方法使用
作用：将form表单中的数据自动拼接成name=value结构，
语法：var param = $(“form”).serialize();

 <script>
        function but(){
            var userid = $("#userid").val();
            var username = $("#username").val();
            var params = $("#form").serialize();
            $.ajax({
                type:"get",
                url:"url",
                data:params,
                success:function(result){
                    alert(result.toString());
                }
            })
        }
    </script>

JQuery.ajax()
 	url: 请求地址
 	type：请求方式（get，post）
 	headers:请求头
 	data:要发送的数据，同时接收返回的数据
 	contentType:即将发送信息到服务器内容的编码格式 
 	async:是否异步
	timeout:设置请求超时时间
	beforeSend:发送请求前执行的函数
	complete:完成之后执行的函数
	success:成功之后执行的函数
	error:失败之后执行的函数
	accepts:发送给服务器，当前可以接受的数据类型
	dataType:将服务器端返回的内容转化成指定的类型
	"xml":将服务器返回的内容转化成xml格式
	"text"：将服务器返回的内容转化成text文本格式

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax</title>
		<!--注意路径问题 ${pageContext.request.contextPath}/ -->
		<script src="js/jquery-1.9.1.js"></script>
		<script type="text/javascript">
			 function al(){
				$.ajax({ //默认是get请求
					url:"/ajxa/hello";
					data:{"name":$("txtName").val()},
					success:function(data){
						console.log(data)
					}
					async:true
				});
			 	$("txtName").val();
			 }
		</script>
	</head>
	<body>
		用户名：<input type="text" id="txtName" onblur="al()" />
	</body>
</html>

示例2 解析json

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax</title>
		<!--注意路径问题 ${pageContext.request.contextPath}/ -->
		<script src="js/jquery-1.9.1.js"></script>
	</head>
	<body>
		<input type="button" id="btn" value="获取数据" />
		<table align="conter">
			<tr>
				<td>姓名</td>
				<td>姓名</td>
				<td>姓名</td>
			</tr>
			<tbody id="content">
			</tbody>
		</table>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					$.post("/ajax/hello",function(data){
						console.log(data);
						var html ="";
						for(var i=0;i<data.length;i++){
							html +="<tr>"+
							"<td>"+data[i].name +"</td>"+
							"<td>"+data[i].age +"</td>"+
							"<td>"+data[i].sex +"</td>"+
							"</tr>"
						}
						$("#content").html(html);
					})
				})
			})
		</script>
	</body>
</html>

示例3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax</title>
		<!--注意路径问题 ${pageContext.request.contextPath}/ -->
		<script src="js/jquery-1.9.1.js"></script>
		<script>
			function a1(){
				$.post({
					url:"/ajax/hello",
					data:{"name":$("#name").val()},
					success: function(data){
						if(data.toString()=='ok'){
							$('#userinfo').css("color":"green");
						}else{
							$('#userinfo').CSS("color":"red");
						}
						$("#userinfo").html(data);
					}
				})
			}
			function a2(){
				$.post("/ajax/hello",{"pwd":$("#pwd").val()},function(data){
					if(data.toString()=='ok'){
							$('#pwdinfo').css("color":"green");
						}else{
							$('#pwdinfo').CSS("color":"red");
						}
						$("#pwdinfo").html(data);
				})
			}
		</script>
	</head>
	<body>
	<p>
		用户名：<input type="text" id="name" onblur="a1()" />
		<span id="userinfo"></span>
	</p>
	<p>
		密码：<input type="text" id="pwd" onblur="a2()" />
		<span id="pwdinfo"></span>
	</p>
	</body>
</html>

Ajax总结
使用Jquery封装好的ajax, 有后端controller 返回的是json或是String,
ajax请求：1 url : controller请求，2 data: key:value ，3 success : function(){} 回调函数
给Ajax绑定事件来触发，
List item

爱码～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax技术复习---狂神笔记

认识两个注解1 @ResonseBody 作用是将后台数据java对象转化成json数据对象2 @RequestBody作用是将前端传过来json对象转化成pojo对象，Ajax异步的javaScript和xml,能够局部刷新网页技术，本质Ajax的本质是XMLHttpRequest对象(xhr),xhr能够向服务器发送请求和解析服务器响应提供了接口，能够以异步的形式获取数据，JQuery AjaxJQuery 中封装了Ajax,本质上也是XMLHttpRequest.方便了..
复制链接

扫一扫