Question

最近我开始学习jQuery和AJAX，并且对AJAX请求感到困惑。

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

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

我列出了我认为与此问题相关的所有文件以及相关的依赖项。

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

app.js包含实际快递应用的代码。
main.js包含ajax请求。
todoController.js包含请求的处理程序。
todo.hbs是当用户访问＆＃39; / todo＆＃39;

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()
            }
        })
    })
})

```

todoController.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)
    })
}

```

todo.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请求中，通常客户端要求服务器将相同的数据存储到数据库中，并且由于服务器端可能发生任何错误，因此通过确认响应或者发生错误非常重要。

在考虑完全执行请求之前，这是客户端在任何情况下都需要服务器响应的主要原因。

为什么要将数据传递给AJAX请求＆＃39;成功＆＃39;功能？

1 个答案: