美文网首页
get和post方式请求数据 jsonp

get和post方式请求数据 jsonp

作者: 前端小华子 | 来源:发表于2017-07-17 22:09 被阅读0次

get方式请求数据:

 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) {
    consoe.log(res);
 }, function(err) {
    console.log(err);
 });

通过jsonp请求数据,通过动态创建script标签来访问服务器,把回调函数名作为参数传递给服务器 服务器请求得到数据以后,把数据放回到回调函数中 前端通过回调函数的实现部分,得到数据。

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请求

$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请求

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服务器代码:

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

2.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 postData = "";
    //监听:如果前端有数据发送过来
    req.addListener("data", function(data) {
        postData += data;
    });
    //前端数据传输完毕
    req.addListener("end", function() {
        //把接收到的data数据转换成对象方式
        var postDataObj = JSON.parse(postData);
        var myUrl = postDataObj.myUrl;
        //用来接收网易数据的变量
        var resultData = "";
        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端口正在监听中...")
});

相关文章

  • http协议,tcp/udp汇总

    GET和POST请求方式的区别? get获取数据,post发送数据 get拼接URL后面,post参数放在body...

  • Angular基础(下)

    $http 1、$http method设置请求的方式:get , post , jsonp , head , p...

  • day46-cookie及session

    1请求方式 请求方式有get和post两种方式;数据查询用get请求数据操作(增、删及改操作)用post请求 1....

  • 跨域

    ??JSONP只能解决GET请求跨域,不能解决POST请求跨域问题,XHR2可以解决GET,POST方式的请求跨域...

  • ajax与jsonp、jsonp

    轮播图 json 数据格式 ajax与jsonp ajax是获取数据的 get请求 post请求 url:"js/...

  • get和post方式请求数据 jsonp

    get方式请求数据: 通过jsonp请求数据,通过动态创建script标签来访问服务器,把回调函数名作为参数传递给...

  • URLConnection以post方式提交数据

    post请求跟get请求的区别 一 ☆☆☆☆☆☆☆和get方式提交数据 区别 路径不同 二 ☆☆☆☆☆☆☆和get...

  • Node.js基础

    http数据请求前台->form, ajax, jsonp后台 get数据在url中post不在url中 modu...

  • nodejs获取GET和POST数据以及读取响应请求文件

    用户发送数据请求的时候,常见的方式是GET和POST请求,无论是发送GET还是POST,其数据都在请求内容对象re...

  • 程序猿又爱又很的POST和GET请求

    ·请简要描述get请求方式和post请求方式的区别! 1.GET请求的数据会附在URL之后,(将数据放置在HTTP...

网友评论

      本文标题:get和post方式请求数据 jsonp

      本文链接:https://www.haomeiwen.com/subject/evgqkxtx.html