JavaScript 具有非常棒的模块和方法,可以用来建立可从服务器端资源发送或接收数据的 HTTP 请求。
一、JavaScript发送get、post请求的方法
POST请求:
发送的参数格式不同,请求头设置不同
发送的参数格式不同,后台获取方式也不相同
1、使用XMLHttpRequest
主要分三步:
第一步:创建需要的对象,这里主要用到的是XMLHttpRequest,注意需要考虑早期的IE;
第二步:连接和发送;
第三步:接收;
GET请求:
var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象
httpRequest.open('GET', 'url', true);//第二步:打开连接 将请求参数写在url中 ps:"./Ptest.php?name=test&nameone=testone"
httpRequest.send();//第三步:发送请求 将请求参数写在URL中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = httpRequest.responseText;//获取到json字符串,还需解析
console.log(json);
}
};
POST请求:
var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', 'url', true); //第二步:打开连接
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)
httpRequest.send('name=teswe&ee=ef');//发送请求 将情头体写在send中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
var json = httpRequest.responseText;//获取到服务端返回的数据
console.log(json);
}
};
POST方式发送JSON:
var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', 'url', true); //第二步:打开连接/***发送json格式文件必须设置请求头 ;如下 - */
httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)var obj = { name: 'zhansgan', age: 18 };
httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
var json = httpRequest.responseText;//获取到服务端返回的数据
console.log(json);
}
};
二、基于JQuery的GET/POST数据提交方式
如果初学Javascript,对于JQuery可能会跟我一样完全不清楚,所以适当的普及一下JQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
1、$.get(url, data, callback)
参数 描述
url 必需,规定您需要请求的URL
data 可选,规定连同请求发送到服务器的数据,格式是json
callback 可选,回掉函数,当请求成功时运行的函数
2、$.post(url, data, callback)
参数 描述
url 必需,规定您需要请求的URL
data 可选,规定连同请求发送到服务器的数据,格式是json
callback 可选,回掉函数,当请求成功时运行的函数
使用方法是这样的,首先,在需要调用JQuery的页面里,用script标签导入Jquery文件,例如:
<script src="static/js/jquery-3.2.1.min.js"></script>
接着,在你的input/button标签或者需要发送数据的地方,增加一个onclick的属性,例如:
...
<input type="button" value="submit" onclick="doPost('/')" />
这样就可以使用JQuery发送数据了。
另外一种方法,是构造一个form,利用form来进行提交。