Быстрый Добавить Редактировать Удалить сообщение API в nodejs и jquery без загрузки страницы - PullRequest
Новая
       4

Быстрый Добавить Редактировать Удалить сообщение API в nodejs и jquery без загрузки страницы

0 голосов
/ 10 января 2020

Я создаю приложение CRUD для моей программы расчета вентиляторов при вставке, обновлении и удалении запросов в node js каждый раз, когда мне нужно было выполнить процесс перезагрузки в состоянии успешного выполнения запроса. Как получить подсказку и быстрый ввод данных без загрузки страницы. я добавляю данные и возвращаюсь в список выбора меню и строки таблицы. Пожалуйста, ознакомьтесь с моими написанными кодами и помогите / направьте меня, чтобы найти лучшее решение для быстрого удаления и редактирования, используя процесс jquery ajax и nodejs.

БД, используемый sqlite3

код

Frond end 

$('#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();
        }
    })
})

backend 

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/')
    }) 
});

1 Ответ

0 голосов
/ 10 января 2020

В вашем внутреннем коде вы пытаетесь отправить дырочную страницу в функцию jquery ajax, пытаясь отправить из вашего кода только те данные, которые вы хотите обновить, и затем вы можете обновить страницу пользовательского интерфейса, как вы хотите

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