传参复习
post请求的参数不会出现在地址栏上
(1)&连接的key=value,适用于GET和POST请求,此时contentType必须为application/x-www-form-urlencoded,后端不能使用@RequestBody注解
(2)json对象,适用于GET和POST请求,且此时contentType必须为application/x-www-form-urlencoded,ajax会自动将 json对象转化为&连接的key=value格式的数据,GET请求就拼接在url后面,POST请求就放入post请求体中,后端不能使用@RequestBody注解
json对象:
obj = {
"number": obj.number,
"password": obj.password,
"name": obj.name,
"identity": obj.identity,
"major": obj.major,
"unit": obj.unit,
"gender": obj.gender,
"age": parseInt(obj.age),
"id_number": obj.id_number
};
(4)json字符串,只适用于POST请求,且此时contentType必须为application/json,后端必须使用@RequestBody注解
post请求体
HTTP请求中 header query 和 body的区别
header显而易见是请求头
query是指请求的参数,一般是指URL中?后面的参数
如http://10.6.6.6:8080/api/v1/namespaces?pretty=true中 pretty=true就是query
body是指请求体中的数据
前端发送请求最常用的是get请求还有post请求
get请求只能传query参数,query参数都是拼在请求地址上的
post可以传body和query两种形式的参数
body的类型
application/x-www-form-urlencoded
就是application/x-www-from-urlencoded,会将表单内的数据转换为键值对,比如,name=Java&age = 23
multipart/form-data
这又是一个常见的 POST 数据提交的方式,一般用做文件提交
就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段,为了避免与正文内容重复,boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码,本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 --boundary 开始,紧接着是内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。如果传输的是文件,还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。
application/json
application/json 。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。
JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。
raw
可以上传任意格式的文本,可以上传text、json、xml、html等
binary
相当于Content-Type:application/octet-stream,从字面意思得知,只可以上传二进制数据,通常用来上传文件,由于没有键值,所以,一次只能上传一个文件。
multipart/form-data与x-www-form-urlencoded区别
multipart/form-data:既可以上传文件等二进制数据,也可以上传表单键值对,只是最后会转化为一条信息;
x-www-form-urlencoded:只能上传键值对,并且键值对都是间隔分开的
ajax传参
Ajax的全称是Asynchronous JavaScript and XML(是异步的 javascript 和 XML),
通过后台少量的数据交换实现不刷新网页从而进行网页动态的技术,ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
Ajax能传输的数据格式一共有三种,HTML格式,XML格式,JSON格式
HTML格式
使用HTML传输格式,最大特点是要使用DOM方法,获取结点,通过结点进行操作使用innerHTML进行对DOM标签的值写入,从而实现异步更新
首先放HTML代码,下面的文件是从这一段代码来获取数据的
1 <h2><a >Andy</a></h2>
2 <a>aaaaaa</a>
首先要获取到对象的onlick方法,并且retuen fales这样做的目的是为了废除让a标签的跳转方法
然后按一下几个步骤执行
1.创建一个XMLHttpRequest对象
2.准备发送的数据,一般准备两个一个URL一个Method
3.调用XMLHttpRequest对象的Open方法,和Send方法,为了方便记忆,这里为了方便理解我所认为就是Open就是准备阶段,send就是发送。
4.调用XMLHttpRequest对象的onreadystatechange()方法,这个方法会和数据或者服务器进行交互,并且这个过程会有4部,只有当XMLHttpRequest对象的readyState为4的时候表示交互完成
5.调用XMLHttpRequest对象的status方法,这个对象代表的网页状态比如404(找不到网页) ,500(服务器内部错误),200(成功),
6操作DOM对标签的值进行写入XMLHttpRequest对象的responseText就是返回的文本
<%@ 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>Ajax HTML格式传输</title>
<script type="text/javascript">
window.onload = function(){
//1.获取a结点,并为其添加相应的onclick函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = null;
request = new XMLHttpRequest();
//4.准备发送的数据:url
var url =this.href ;
var method = "GET";
//5.调用XMLHttpRequest的 Open 方法
request.open(method, url);
//6.调用XMLHttpRequest的 send 方法
request.send(null);
//7.为XMLHttpRequset 对象添加onreadystatechange相应函数
request.onreadystatechange = function(){
//8.用requset对象的readyState方法判断是否进行到了第四步
if(request.readyState == 4){
//9.用requset对象的status判断页面请求是否成功
if(request.status == 200 || request == 304){
//2.获取到输入信息结点并放入返回的值
document.getElementById("andy").innerHTML = request.responseText;
}
}
}
return false;
}
}
</script>
</head>
<body>
<a href="files/Ajax_HTML.html">andy</a>
<div id="andy"></div>
</body>
</html>
XML格式
我认为,XML操作比HTML操作更为复杂,比上面就多了一个XML解析而已。
过程基本相同,只不过HTML传输格式传输使用responseText,而这里通过responseXML来获取XML文档,然后解析或者子节点的值在对DOM进行操作。
1 <?xml version="1.0" encoding="UTF-8"?>
2 <detalis>
3 <name>Andy</name>
4 <text>hahahahahaah</text>
5 </detalis>
<%@ 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>Ajax XML格式传输</title>
<script type="text/javascript">
window.onload = function(){
//1.获取a结点,并为其添加相应的onclick函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送的数据:url
var url =this.href ;
var method = "GET";
//5.调用XMLHttpRequest的 Open 方法
request.open(method, url);
//6.调用XMLHttpRequest的 send 方法
request.send(null);
//7.为XMLHttpRequset 对象添加onreadystatechange相应函数
request.onreadystatechange = function(){
//8.用requset对象的readyState方法判断是否进行到了第四步
if(request.readyState == 4){
//9.用requset对象的status判断页面请求是否成功
if(request.status == 200 || request == 304){
//结果是XML格式,所以需要使用respinseXML来获取
var result =request.responseXML;
//结果不能使用来先创建对应的结点再将结果加入到#Andy中
/*
目标格式为
<h2><a >Andy</a></h2>
<a>aaaaaa</a>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var text = result.getElementsByTagName("text")[0].firstChild.nodeValue;
//alter(name);
//alter(text);
var nodea = document.createElement("a");
nodea.appendChild(document.createTextNode(name));
var nodeaa = document.createElement("a");
nodeaa.appendChild(document.createTextNode(text));
var andy = document.getElementById("andy");
andy.appendChild(nodea);
andy.appendChild(nodeaa);
}
}
}
return false;
}
}
</script>
</head>
<body>
<a href="files/Ajax_XML.xml">andy</a>
<div id="andy"></div>
</body>
</html>
json格式
比如,这就是一会要用的js文件
{"person":{ "name":"andy", "text":"hahahaha" } }
<%@ 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>Ajax XML格式传输</title>
<script type="text/javascript">
window.onload = function(){
//1.获取a结点,并为其添加相应的onclick函数
document.getElementsByTagName("a")[0].onclick = function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送的数据:url
var url =this.href ;
var method = "GET";
//5.调用XMLHttpRequest的 Open 方法
request.open(method, url);
//6.调用XMLHttpRequest的 send 方法
request.send(null);
//7.为XMLHttpRequset 对象添加onreadystatechange相应函数
request.onreadystatechange = function(){
//8.用requset对象的readyState方法判断是否进行到了第四步
if(request.readyState == 4){
//9.用requset对象的status判断页面请求是否成功
if(request.status == 200 || request == 304){
var result =request.responseText;
var object = eval( "(" + result + ")" );
//结果不能使用来先创建对应的结点再将结果加入到#Andy中
/*
目标格式为
<h2><a >Andy</a></h2>
<a>aaaaaa</a>
*/
var name = object.person.name;
var text = object.person.text;
//alter(name);
//alter(text);
var nodea = document.createElement("a");
nodea.appendChild(document.createTextNode(name));
var nodeaa = document.createElement("a");
nodeaa.appendChild(document.createTextNode(text));
var andy = document.getElementById("andy");
andy.appendChild(nodea);
andy.appendChild(nodeaa);
}
}
}
return false;
}
}
</script>
</head>
<body>
<a href="files/Ajax_json.js">andy</a>
<div id="andy"></div>
</body>
</html>
ajax在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xmlHttp对象共有5个状态:
0状态:刚创建,还没有调用open()方法;
1状态:请求开始,调用了open()方法,但还没有调用send()方法;
2状态:调用完send()方法;
3状态:服务器已经开始响应,但不表示响应结束;
4状态:服务器响应结束;
l 得到xmlHttp对象的状态:
var state=xmlHttp.readyState;
l 得到响应的状态码:
var status=xmlHttp.status;
l 得到服务器响应的内容
var content=xmlHttp.responseText;//得到服务器的响应的文本格式内容;
var content=xmlHtto.responseXML;//得到服务器响应的XML内容,即Document对象;
xmlHttp.onreadystatechange=function(){//这是xmlHttp的5种状态都会调用的方法
if(xmlHttp.readystate==4&&xmlHttp.status==200){//双重判断:判断是否为4状态,且要判断是否为200//获取服务器的响应内容
vartext=xmlHttp.reponseText;}};
ajax传参标准格式
1.json格式形如:
{“username”:”chen”,”nickname”:”alien”}
$.ajax({
type: "post",
url: "/test/saveUser",
data: {
"username": "chen",
"nickname": "alien"
},
dataType: "json",
success: function(data) {
console.log(data);
}
});
形如:
“{“username”:”chen”,”nickname”:”alien”}” 或者JSON.stringify({“username”:”chen”,”nickname”:”alien”})
$.ajax({
type: "post",
url: "/test/saveUser",
data: JSON.stringify({
"username": "chen",
"nickname": "alien"
}),
contentType: "json/application"
dataType: "json",
success: function(data) {
console.log(data);
}
});
用此格式get请求参数传递不过去,不会把json串解析成参数
而且需要添加 contentType:”json/application”
形如:
“username=chen&nickname=alien
$.ajax({
type: "post",
url: "/test/saveUser",
data: "username=chen&nickname=alien",
dataType: "json",
success: function(data) {
console.log(data);
}
});