为什么将数据传递给 AJAX 请求“成功”函数？

Question

最近开始学习 jQuery 和 AJAX，对 AJAX 请求有点困惑。

为了练习，我正在使用 Node、jQuery 和 Bootstrap 制作一个非常基本的 TodoApp。我真的对所有这些 GET 和 POST 请求感到困惑。我终于正确理解了这些，但我无法理解为什么我们需要在发出 POST 请求后通过“成功”功能发回数据。但是，我确实从成功函数中删除了数据参数并尝试这样做，但它给了我一个错误，但刷新页面后我可以看到我的条目已输入。

编辑：这是关于用户添加项目时发生的 POST 请求。

我已经列出了我认为与这个问题相关的所有文件以及相关的依赖关系。

依赖项：Express、Handlebars（我正在使用的模板引擎）、Bootstrap、jQuery。

• app.js 包含实际 express 应用的代码。
• main.js 包含 ajax 请求。
• todoController.js 包含请求的处理程序。
• todo.hbs 是用户访问“/todo”时呈现的把手文件

app.js ```

var express = require('express')
var hbs = require('express-handlebars').create({
    defaultLayout: 'main',
    extname: '.hbs',
    layoutsDir: __dirname + '/views/layouts',
    partialsDir: __dirname + '/views/partials'
})
var todoController = require('./controllers/todoController')

var app = express()

app.set('port', process.env.PORT || 3000)
app.engine('hbs', hbs.engine)
app.set('view engine', 'hbs')
app.set('views', __dirname + '/views')
app.use(express.static(__dirname + '/public'))

todoController(app)

app.listen(app.get('port'), function(){
    console.log('...' + app.get('port') + '...')
})

```

main.js（在公共文件夹内） ```

$(document).ready(function(){
    $('.jumbotron').hide().fadeIn(500)

    $('#add-button').on('click', function(){
        var todo = $('#todo-input').val()

        $.ajax({
            type: 'POST',
            url: '/todo',
            data: {item: todo},
            success: function(data) {
                location.reload()
            },
            error: function(){
                alert('something went wrong.')
            }
        })
    })

    $('.todos-list').on('click', function(){
        var item = $(this).val()

        $.ajax({
            type: 'DELETE',
            url: '/todo/' + item,
            success: function(){
                location.reload()
            }
        })
    })
})

```

tod​​oController.js ```

var bodyParser = require('body-parser')
var urlEncodedParser = bodyParser.urlencoded({extended: false})

var data = [
    {
        item: 'Get shit.'
    },
    {
        item: 'Get milk.'
    }
]

module.exports = function(app) {

    app.get('/todo', function(req, res){
        res.render('todo', {title: 'TodoApp', todos: data})
    })

    app.post('/todo', urlEncodedParser, function(req, res){
        data.push(req.body)
        res.json(data)
    })

    app.delete('/todo/:item', function(req, res){
        data = data.filter(function(todo){
            return todo.item.replace(/ g/, '-') !== req.params.item
        })
        res.json(data)
    })
}

```

tod​​o.hbs ```

<input type="text" id="todo-input"/>
<button type="submit" id="add-button">Add Item</button>
<ul class="todos">
    {{#each todos}}
        <li class="todos-list">{{this.item}}</li>
    {{/each}}
</ul>

```

Answer 1

客户端-服务器范式的工作原理是客户端向服务器发出请求（GET、POST、PUT、DELETE 等），服务器接收它，执行相同的操作（通常涉及数据库）并根据请求类型，服务器向客户端发送响应。 在 GET 请求中，客户端要求一个特定的值，并且返回的值是强制性的。 在 POST 请求中，通常客户端要求服务器将相同的数据存储到数据库中，由于服务器端可能发生任何错误，因此以确认或发生错误的方式进行响应非常重要。

这是客户端在考虑请求完全执行之前无论如何都需要来自服务器的响应的主要原因。