Ajax技术复习---狂神笔记
-
认识两个注解
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>Ajaxtitle>
<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>Ajaxtitle>
<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 +=""+
""+data[i].name +" "+
""+data[i].age +" "+
""+data[i].sex +" "+
" "
}
$("#content").html(html);
})
})
})
script>
body>
html>
- 示例3
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajaxtitle>
<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