首页 > 代码库 > 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"}

});

 

 

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4663cc } 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: #a5b2b9 } span.s1 { color: #4a8a01 } span.s2 { color: #060606 } span.s3 { color: #e48b00 } span.s4 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style>

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...");
    });
View Code

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端口正在监听中...")
    });
View Code

 

 

<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