快速添加编辑删除 api post in nodejs 和 jquery without page load

Question

我正在为我的粉丝计算软件创建一个 CRUD 应用程序，每次我需要在查询成功状态下进行重新加载过程时，都会在节点 js 中插入、更新和删除查询。如何在不加载页面的情况下获得提示和快速数据输入。我在 select 菜单选项列表和 table 行中添加数据并取回。请参考我编写的代码和 help/guide 我以获得更好的解决方案来使用 jquery ajax 和 nodejs.

执行快速添加编辑删除过程

数据库使用sqlite3

代码

前端

$('#addnewmodelform').on('submit', function (event) {
    event.stopPropagation();
    event.preventDefault();
    var Series_ID = $('#Unit_Series option:selected').val();
    var Model_Name = $('#Unit_Series option:selected').text()+'-'+$('#Model_Name').val();
    if($('#Four_Pipe').attr('checked', true)){
        var Four_Pipe = 'TRUE';} else {var Four_Pipe = 'FALSE'}
    var Variant = $("input[name='Variant']:checked").val();
    $.ajax({
        url: "http://localhost:3000/addmodel",
        method: "POST",
        dataType : 'json',
        data:  {
            Series_ID : Series_ID,
            Model_Name : Model_Name,
            Four_Pipe : Four_Pipe,
            Variant : Variant
        },
        success: function (data) {
            console.log(data)
            location.reload();
        }
    })
})

后端

app.post('/addmodel', function  (req, res) {
if (req.body.Series_Pipe == 2){
    var twopipe = 'TRUE'
} else {var twopipe = 'FALSE'}
if (req.body.Series_Pipe == 4){
    var fourpipe = 'TRUE'
} else {var fourpipe = 'FALSE'}

    var query = 'INSERT INTO "Unit_Models"("Series_ID","Model_Name","m4Pipe","Dim_Image_file","Filter_Default","Coil_Default","Model_Number","Variant") VALUES ('
    query += "'" + req.body.Series_ID + "',"
    query += "'" + req.body.Model_Name + "',"
    query += "'" + req.body.Four_Pipe + "',"
    query += "'" + 'x'+ "',"
    query += "'" + '1'+ "',"
    query += "'" + '1'+ "',"
    query += "'" + req.body.Model_Name + "',"
    query += "'" + req.body.Variant + "'"
    query +=  ");"
    // query +='INSERT INTO "Unit_Models"("Series_ID") VALUES ('
    db.run(query, (err, results) =>{
        if(err) throw err;
        res.redirect('http://localhost:3000/')
    }) 
});

Answer 1

在您的后端代码中，您尝试将漏洞页面发送到 jquery ajax 函数尝试从您的代码仅发送您想要更新的数据，然后您可以根据需要更新 ui 页面

index.js

app.post('/addmodel', function (req, res) {
    if (req.body.Series_Pipe == 2) {
        var twopipe = 'TRUE'
    } else {
        var twopipe = 'FALSE'
    }
    if (req.body.Series_Pipe == 4) {
        var fourpipe = 'TRUE'
    } else {
        var fourpipe = 'FALSE'
    }

    var query = 'INSERT INTO "Unit_Models"("Series_ID","Model_Name","m4Pipe","Dim_Image_file","Filter_Default","Coil_Default","Model_Number","Variant") VALUES (?,?,?,?,?,?,?,?)'

    db.run(query, [req.body.Series_ID, req.body.Model_Name, req.body.Four_Pipe, 'x', '1', '1', req.body.Model_Name, req.body.Variant], (err, results) => {
        if (err) {
            console.log(err.message)
            res.send(err.message)
            return
        }

        console.log(`A row has been inserted with rowid ${this.lastID}`);
        // set your query 
        const sql = `SELECT  * FROM Unit_Models where ROWID=? `;

        db.all(sql, [this.lastID], (err, data) => {
            if (err) {
                throw err;
            }
            console.log(data)
            res.send(data);
        });
    })
    // close connection
    db.close((err) => {
        if (err) {
            console.error(err.message);
        }
        console.log('Close the database connection.');
    });
});

jquery 函数

   $('#addnewmodelform').on('submit', function (event) {
        event.stopPropagation();
        event.preventDefault();
        var Series_ID = $('#Unit_Series option:selected').val();
        var Model_Name = $('#Unit_Series option:selected').text()+'-'+$('#Model_Name').val();
        if($('#Four_Pipe').attr('checked', true)){
            var Four_Pipe = 'TRUE';} else {var Four_Pipe = 'FALSE'}
        var Variant = $("input[name='Variant']:checked").val();
        $.ajax({
            url: "http://localhost:3000/addmodel",
            method: "POST",
            dataType : 'json',
            data:  {
                Series_ID : Series_ID,
                Model_Name : Model_Name,
                Four_Pipe : Four_Pipe,
                Variant : Variant
            },
            success: function (data) {
                console.log(data)
                //here you can update your UI elements as you want 
            }
        })
    })

快速添加编辑删除 api post in nodejs 和 jquery without page load

quick Add Edit Delete api post in nodejs and jquery without page load

sqlite

jquery

crud

node.js