为什么要将数据传递到 AJAX 请求'success'函数中？

最近我开始学习jquery和ajax，与ajax请求有些混淆。

为了练习，我正在使用 node ， jQuery 和 Bootstrap 进行基本的待办事项。我真的对所有这些获取和发布请求感到困惑。我终于正确地理解了这些内容，但我无法理解为什么我们需要在提出发布请求后通过"成功"功能将数据发送回数据。但是，我确实从成功函数中删除数据参数，并试图这样做，但它给了我一个错误，但是在刷新页面后，我可以看到我的条目已输入。

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

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

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

app.js包含实际快速应用的代码。
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()
            }
        })
    })
})

````

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>

````

client-server范式的工作端范围为服务器提出请求（获取，发布，张贴，删除等），该服务器接收它，执行相同的操作（通常涉及数据库）和根据请求类型，服务器向客户端发送响应。在获取请求中，客户端要求特定值，并且返回的值是强制性的。在POST请求中，通常客户向服务器询问将相同的数据存储到数据库中，并且由于服务器端可能发生任何错误，因此使用确认或发生错误的响应很重要。

。

这是客户在考虑完全执行的请求之前，客户端需要的主要原因。

相关内容

最新更新

热门标签：