Express运用AJAX及实现JSONP

最新推荐文章于 2023-03-08 23:43:37 发布

duansamve

最新推荐文章于 2023-03-08 23:43:37 发布

阅读量938

点赞数

分类专栏： nodejs express 文章标签： node.js express jsonp

本文链接：https://blog.csdn.net/duansamve/article/details/90273922

版权

nodejs 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

express

8 篇文章 0 订阅

订阅专栏

一、get请求：

index.html

<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" value="Ajax" id="get-data"/>

<script type="text/javascript">
$(document).ready(function () {
    $('#get-data').click(function (e) {
        $.ajax({
            url:'/get_data',
            type:'get',
            data:{},
            success:function (data) {
				console.log(data);
            },
            error:function (err) {

            }
        });
    });
});
</script>
</body>
</html>

test.js

const express = require("express");
const app = express();

//定义一个存放静态资源的目录
app.use('/src', express.static("src"));

app.get("/index.html", function(req, res, next){
	res.sendFile( __dirname + "/" + "index.html" );
})

app.get("/get_data", function(req, res, next){
    var obj = {
            title:'耶鲁留学生的2000张自拍照',
            src:'腾讯新闻',
            content:'推动新一代人工智能健康发展 更好造福世界各国人民'
        }
   res.json(obj);
})

const server = app.listen(8080, function(){
	console.log("启动成功！");
})

二、post请求：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>

<body>
<form action="/get_data" method="POST">
    First Name: <input type="text" id="first-name">  <br>

    Last Name: <input type="text" id="last-name">
    <input type="button" value="提交" id="get-data"/>
</form>

<script>
$(function(){
    $("#get-data").click(function(){
        $.ajax({
            type: "POST",
            url: '/get_data',
            data: {'firstName': $("#first-name").val(), 'lastName': $("#last-name").val()},
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
        })
    })
})
</script>
</body>
</html>

index.js：

let express = require("express");
let app = express();
let bodyParser = require("body-parser");

let urlencodedParser = bodyParser.urlencoded({extended: false});

app.get("/index", function(req, res, next){
    res.sendFile(__dirname + "/views/" + "index.html")
})

app.post("/get_data", urlencodedParser, function(req, res, next){
    let response = {
        first_name: req.body.firstName,
        last_name: req.body.lastName
    }

    res.type("application/json");
    res.jsonp(response);
});

app.listen(8080, function(){
    console.log("开始请求");
})

三、JSONP（只有get方法支持）：

8080端口：

let express = require("express");
let app = express();

app.use("/public", express.static("public"));

app.get("/index", function(req, res, next){
    res.sendFile(__dirname + "/" + "views/index.html");
});

app.get("/get_data", function(req, res, next){
    let response = {
        "title": "耶鲁留学生的2000张自拍照",
        "content": "耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照"
    };
    res.type('application/json');
    res.jsonp(response);
});

app.listen(8080, function(){
    console.log("开始执行请求");
});

8000端口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>

<input type="button" value="获取数据" id="get-data"/>

<script>
    $(function(){
        $("#get-data").click(function(){
            $.ajax({
                type: "GET",
                url: 'http://127.0.0.1:8080/get_data',
                data: {},
                dataType: "jsonp",
                success: function(data){
                    console.log(data);
                },
                error: function(data){

                }
            })
        })
    })
</script>
</body>
</html>

duansamve

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Express运用AJAX及实现JSONP

一、get请求：index.html<html><head><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script></head><body><input type="button" value="Ajax" id="...
复制链接

扫一扫