首页 > 代码库 > get和post方式请求数据,jsonp
get和post方式请求数据,jsonp
get方式请求数据:
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4663cc } span.s1 { color: #4663cc } span.s2 { color: #060606 } span.s3 { color: #698906 } span.s4 { color: #4a8a01 } span.s5 { color: #000000 } span.s6 { color: #4f5d66 } span.s7 { color: #289c97 } span.s8 { color: #e48b00 } span.s9 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>var theurl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html";
myUrl = encodeURIComponent(theurl);
url = "http://127.0.0.1:3000?myUrl=" + myUrl;
$http({
url: url,
method: "get"
}).then(function(res) {
console.log(res);
}, function(err) {
console.log(err);
});
通过jsonp请求数据,通过动态创建script标签来访问服务器,把回调函数名作为参数传递给服务器 服务器请求得到数据以后,把数据放回到回调函数中 前端通过回调函数的实现部分,得到数据。
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } span.s1 { color: #4663cc } span.s2 { color: #698906 } span.s3 { color: #4a8a01 } span.s4 { color: #289c97 } span.s5 { color: #060606 } span.Apple-tab-span { white-space: pre }</style>var script = document.createElement("script");
url = url + "&callback=xxx";
script.src = url;
document.documentElement.appendChild(script);
angular的$http服务中,callback参数必须写成JSON_CALLBACK,意思是告诉angular自己去创建一个回调函数
var myUrl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html";
$http({
method: "jsonp",
url: "http://localhost:3000?myUrl=" + myUrl + "&callback=JSON_CALLBACK"
})
.then(function(res) {
console.log(res);
},
function(err) {
console.log(err);
}
);
$http的post请求
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas } span.s1 { color: #4f5d66 } span.s2 { color: #289c97 } span.s3 { color: #060606 } span.s4 { color: #4a8a01 } span.s5 { color: #000000 } span.s6 { color: #e48b00 } span.s7 { color: #4663cc } span.s8 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>$http({
method: "post",
url: "http://localhost:3000",
//post请求需要加这个请求头设置类型
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
myUrl: "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html"
}
})
.then(function(res) {
console.log(res);
},
function(err) {
console.log(err);
});
promise请求
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4a8a01 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } span.s1 { color: #4663cc } span.s2 { color: #698906 } span.s3 { color: #060606 } span.s4 { color: #4f5d66 } span.s5 { color: #289c97 } span.s6 { color: #4a8a01 } span.s7 { color: #000000 } span.Apple-tab-span { white-space: pre }</style>var promise = $http({
method: "post",
url: "http://localhost:3000",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
myUrl: "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html"}
});
promise.success(function(res) {
console.log(res);
});
promise.error(function(err) {
console.log(err);
});
//或者
promise.then(function(res) {
console.log(res);
}, function(err) {
console.log(err);
})
NodeJS服务器代码:
get请求对应的服务器代码:
var http = require("http"); var url = require("url"); var qs = require("querystring"); http.createServer(function(req, res) { res.setHeader("Access-Control-Allow-Origin", "*"); // console.log(req.url); // 对请求对象的url进行解析,拿到查询参数字符串 var query = url.parse(req.url).query; // console.log(query); //把key=value字符串转变成对象的方式 方便获取 var queryObj = qs.parse(query); //用来接收数据的变量 var result = ""; // console.log(queryObj.myUrl); http.get(queryObj.myUrl, function(request) { request.on("data", function(data) { result += data; }); request.on("end", function() { if(queryObj.callback) { var fn = queryObj.callback; var resultStr = JSON.stringify(result); var str = fn + "(" + resultStr + ")"; res.end(str); } else res.end(result); }); }).on("error", function(err) { res.end(err); }) // res.end("hello sb"); }) .listen(3000, function() { console.log("服务器启动成功,监听3000..."); });
post请求对应的服务器代码:
var http = require("http"); var url = require("url"); var qs = require("querystring"); http.createServer(function(req, res) { res.setHeader("Access-Control-Allow-Origin", "*"); //设置编码格式 req.setEncoding("utf8"); //用来接收数据 var postDatahttp://www.mamicode.com/= ""; //监听:如果前端有数据发送过来 req.addListener("data", function(data) { postData += data; }); //前端数据传输完毕 req.addListener("end", function() { //把接收到的data数据转换成对象方式 var postDataObj = JSON.parse(postData); var myUrl = postDataObj.myUrl; //用来接收网易数据的变量 var resultDatahttp://www.mamicode.com/= ""; http.get(myUrl, function(request) { request.on("data", function(data) { resultData += data; }); request.on("end", function() { res.end(resultData); }) }).on("error", function(err) { console.log(err); }); }); }) .listen(3000, function() { console.log("3000端口正在监听中...") });
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4f5d66 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606; min-height: 22.0px } span.s1 { color: #4f5d66 } span.s2 { color: #289c97 } span.s3 { color: #060606 } span.s4 { color: #4a8a01 } span.s5 { color: #000000 } span.Apple-tab-span { white-space: pre }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas } span.s1 { color: #4663cc } span.s2 { color: #060606 } span.s3 { color: #698906 } span.s4 { color: #4f5d66 } span.s5 { color: #289c97 } span.s6 { color: #4a8a01 } span.s7 { color: #000000 } span.s8 { color: #e48b00 } span.s9 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>
get和post方式请求数据,jsonp