Question

我正在学习Ajax，我正在尝试使用AJAX向我的节点js后端发送一个post请求。但是出于某种原因，我尝试了控制台记录来自post请求的数据并且没有显示任何内容。有人能告诉我可能是我的错误吗？

home.ejs

<html>
<title>HomePage</title>
<head>

</head>
<body>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<form>
    Enter the food you are looking for: <input type="text" id="fooddata" name="fooddata"></input>
    <input type="submit" value="Submit" id="Submit">

</form>


<script type="text/javascript">
    $("#Submit").submit(function(event) {
        event.preventDefault();
        var data = {};
        data.name = $('#fooddata').val();
        $.ajax({
            type: 'POST',
            url: '/home',
            data: JSON.stringify(data),
            dataType: 'application/json',
            success: function(data) {
                console.log('success');
                console.log(data);
            }
        });
    });
</script>

</body>

</html>

server.js

const express = require('express');
const app = express();
var cookieParser = require('cookie-parser');

var path = require('path');
var bodyParser = require('body-parser');
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
    extended: true
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
    res.send('Hello World!')
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
});

app.get("/home",function(req,res){
    res.render("Home.ejs");
});

app.post("/home",function(req,res){
    var name = req.body.data.name;

    console.log("data",name);
});

Answer 1

提交表单以不同格式发送数据。而不是你可以使用按钮和点击事件。

下面是几个调整的代码：

home.ejs

<html>
<title>HomePage</title>
<head>

</head>
<body>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<form>
    Enter the food you are looking for: <input type="text" id="fooddata" name="fooddata"></input>
    <input type="button" value="Submit" id="Submit">

</form>


<script type="text/javascript">
    console.log('adsdsdsdasdasd')
    $("#Submit").click(function(event) {
        event.preventDefault();
        var data = {};
        data.name = $('#fooddata').val();
        console.log(data)
        $.ajax({
            type: 'POST',
            url: '/home',
            data: data,
            success: function(data) {
                console.log('success');
                console.log(data);
            },
            error: function(data){
                console.log('error');
                console.log(data)
            }
        });
    });
</script>

</body>

</html>

index.js

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

var path = require('path');
var bodyParser = require('body-parser');
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
    extended: true
}));
app.use(express.static(path.join(__dirname, '')));

// view engine setup
app.set('views', path.join(__dirname, ''));
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
    res.send('Hello World!')
});

app.get("/home",function(req,res){
    res.render("home.ejs");
});

app.post("/home",function(req,res){
    var name = req.body.name;

    console.log("data",name);
    res.send({name:name})
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
});

在节点js中发布Ajax的问题？

1 个答案:

在节点js中发布Ajax的问题​​？

1 个答案:

在节点js中发布Ajax的问题？