ajax异步提交json数据

AJAX（Asynchronous JavaScript and XML）是一种在后台与服务器进行数据交换的技术，在UI不被阻塞的情况下向服务器请求数据，并能够在不刷新整个页面的情况下更新部分页面内容。本文将介绍如何通过AJAX异步提交JSON数据。

<code>
//前端代码
$('#submit-btn').click(function() {
    var data = {
        name: $('#name').val(),age: $('#age').val()
    };

    $.ajax({
        type: "POST",url: "/submit",data: JSON.stringify(data),contentType: "application/json; charset=utf-8",dataType: "json",success: function(response) {
            console.log('提交成功');
        }
    });
});
</code>

上面的代码中，我们首先获取了表单中的name和age字段，并将它们封装成一个JSON对象。接着，使用$.ajax方法发起一个POST请求，url为/submit，data为经过stringify后的JSON数据，contentType为application/json;charset=utf-8说明发送的是JSON数据格式，dataType为json表示接收的也是JSON数据格式。最后，我们在请求成功后打印一条log。

<code>
//后端代码
var bodyParser = require('body-parser');
var express = require('express');
var app = express();

app.use(bodyParser.json());

app.post('/submit',function(req,res) {
    var name = req.body.name;
    var age = req.body.age;

    console.log('收到提交：',name,age);

    res.json({
        status: 'ok'
    });
});

app.listen(3000);
</code>

后端代码中，我们使用了Express框架，并通过body-parser中间件来解析JSON数据。在提交请求时，我们从req.body中获取到请求中提交的name和age字段，并打印到console中。然后我们返回了一个JSON格式的响应，说明提交成功。

AJAX异步提交JSON数据是一个非常方便的技术，它可以让我们在不刷新整个页面的情况下快速地更新部分内容。同时，使用JSON数据格式也可以减小页面传输数据的大小，提高效率。希望本文对大家有所帮助。