GET和POST(ajax request, form submit, 上传文件)

如果对http请求报文还不是很了解的,可以查看点击打开链接


(一)、用html中的form来发送请求。


一、使用get方法

url,表示form的action值。

form的元素名/值将作为url的queryString发送请求,如:

<form id="uploadForm" action="/test/rest/http/htmlGetMethod" enctype="" method="get">
	<input type="text" id="elem" name="elem" value="find"/>
        <input type="submit" value="Submit"/>
</form>
则,

url:http://ip:port/test/rest/http/htmlGetMethod

queryString:elem=find

如果url本来带有queryString,则会被from的元素覆盖掉,如:

<form id="uploadForm" action="/test/rest/http/htmlGetMethod?v=1234565" enctype="" method="get">
虽然url多了v=1234565,但发送请求的url和queryString跟上面是一样的

二、使用post方法

1、form的enctype不设置值、或=''、或='application/x-www-form-urlencoded'

在这种情况下,enctype的值都为application/x-www-form-urlencoded

form的元素名/值放在请求体(request-body)中发送,如:

<form id="uploadForm" action="/test/rest/http/htmlPostMethod?v=sun" enctype="" method="post">
	    <input type="text" id="elem" name="elem" value="find"/>
	    <input type="file" id="firstFile" name="firstFile"/>
	     <input type="submit" value="Submit"/>
	</form>
发送的请求头部和请求体为:

contentLength:20

contentType:application/x-www-form-urlencoded


elem=find&firstFile=

2、form的enctype='multipart/form-data'

发送的请求头部和请求体为:

content-type:multipart/form-data; boundary=---------------------------257881762317299
content-length:68568

-----------------------------257881762317299
Content-Disposition: form-data; name="elem"

find
-----------------------------257881762317299
Content-Disposition: form-data; name="firstFile"; filename="test.doc"
Content-Type: application/msword


<test.doc的内容>

-----------------------------257881762317299--

(其中请求头部有boundary=---------------------------257881762317299,这表示请求体中各数据之间的边界,而---------------------------257881762317299--表示请求体的数据已结束,filename表示上传文件的名称,Content-Type表示文件的类型,接下来空一行,接着就是文件的内容。)

Content-Type的可选值:

text:用于标准化地表示的文本信息,文本消息可以是多种字符集和或者多种格式的,默认为text/plain;

multipart:用于连接消息体的多个部分构成一个消息,这些部分可以是不同类型的数据,默认为multipart/mixed;

application:用于传输应用程序数据或者二进制数据,默认为application/octet-stream;

message:用于包装一个E-mail消息;

image:用于传输静态图片数据;

audio:用于传输音频或者音声数据;

video:用于传输动态影像数据,可以是与音频编辑在一起的视频数据格式。


(二)、使用jquery发送ajax请求


一、使用get方法

如:

                         var url = '/test/rest/http/ajaxPostMethod?v=7854';
	        	 $.ajax({
	        		url : url,
	        		type : 'get',
	        		data : {a:1,b:3},
	        		success : function(data, textStatus, jqXHR){
	        			alert("status:" + textStatus + ", jqXHR:" + jqXHR);
	        		},
	        		error : function(jqXHR, textStatus, errorThrown){
	        			alert("jqXHR:" + jqXHR + ", status:" + textStatus);
	        		}
	        	 });
则data:{a:1,b:3}也将作为url的queryString,相当于url='/test/rest/http/ajaxPostMethod?v=7854&a=1&b=3';


二、使用post方法

如:

                         var url = '/test/rest/http/ajaxPostMethod?v=7854';
	        	 $.ajax({
	        		url : url,
	        		type : 'post',
	        		data : {a:1,b:3},
	        		success : function(data, textStatus, jqXHR){
	        			alert("status:" + textStatus + ", jqXHR:" + jqXHR);
	        		},
	        		error : function(jqXHR, textStatus, errorThrown){
	        			alert("jqXHR:" + jqXHR + ", status:" + textStatus);
	        		}
	        	 });
请求头和请求体为:

accept:*/*
content-type:application/x-www-form-urlencoded; charset=UTF-8
x-requested-with:XMLHttpRequest
accept-language:zh-cn
accept-encoding:gzip, deflate
user-agent:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
host:localhost:8088
content-length:7
connection:Keep-Alive
cache-control:no-cache
cookie:JSESSIONID=F5639C1CB2FD03E69713E055B84199E7.tomcat2

a=1&b=3

1、则a=1&b=3作为请求报文的请求体发送请求,

2、请求头多了个属性:x-requested-with:XMLHttpRequest,可以判断出ajax请求为异步请求;如果x-requested-with值为null则判断为同步请求。


此外,jquery也可以上传文件,不过jquery最终也是要使用html的form来上传文件的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值