各位先進好~ 小弟剛學完HTML/CSS和DOM,以及簡單Node.js連結資料庫(MongoDB)操作,目前嘗試製作迷你專案to do list。
簡單邏輯是這樣:
1.前端網頁會有使用者輸入ID、農產品種植時間、事件清單和日期,和一個提交按鍵,下面有個訊息區(textarea),如果是輸入新的ID,目前沒問題會直接送到資料庫創建資料
問題:
我的問題是如果是資料庫中已經有ID資料,在使用者按提交按鍵時,透過Node.js 利用moogoose套件比對後,如果發現已有使用者ID和種植時間(唯一值),會彈回前端並顯示在下方訊息區(textarea),告訴使用者正在更新哪一筆資料和資訊,比方說"此ID是已創建的資料,你今天更新xxx"。
TextArea訊息區,目前想到資料庫比對後,直接用innertext丟進去
只是目前問題是node.js 好像不支援DOM操作,寫在同一個JS檔案也怪怪的,或者說我該怎麼將兩項給分開? (我知道以後前後端要分流XD..node js也是後端伺服用,只是在嘗試做中學) > </...新手問題多 請多多包涵

目前嘗試用Jquery ajax+Node.js,只是驗證後用後端res.send(data),似乎都傳不到前端讓ajax接收顯示....一直停在res.send刷新頁面的json資料
前端
$.ajax({
            data: userdata, 
            url: 'http://localhost:3000/',
            dataType: 'json',
            type: 'post', 
            cache: false,
            timeout: 5000,
            success: function(res){
                 $("textarea").text(res.check);
                 $("textarea").focus(function(){
                     $("textarea").text().remove();
                    });
                },
                error:function(jqXHR, textStatus, errorThrown){
                    alert('error'+ textStatus+'errorThrown');}
                });
            });
        });
後端
router.post("/", async(req, res) => {
    try{let plotid = req.body.plotid;
        let todothing =  req.body.todothing;
        let todomonth = req.body.todomonth;
        let tododate = req.body.tododate;
        let newinputdata = new Ricecalendar({
            plotid,
            todothing,
            todomonth,
            tododate,
        });
        console.log(newinputdata);
        var data = { check: ""};
        searchdata=await Ricecalendar.findOne({plotid});
        if (searchdata!==null){
            message.check="this is Old Plot you have xxx tracebility data"; 
            **res.send(data);}** 停留在這未傳回到Ajax
        else {
            message.check="This is New Resgistrated Plot, Welcome" ;
            res.send(data);
        };
        newinputdata .save().then(() => {
        console.log("Data already saved");});
    }
    catch{res.send("Error");}
    
});
app.use("/",router);
感謝各位大大回覆和討論~問題已經解決囉><~太開心了
1.前端瀏覽器html部分需要引入jQuery Ajax,利用Ajax Get或Post聯絡後端
2.Node.js 收到請求後(req),進行資料庫搜尋和吐出處理好的數據,res回傳
部分可以是json,text或html...
3.再由前端Ajax接收後端res資料後,下面就是利用jQuery DOM($)選取器進行網頁元素新增或刪除等渲染。
4.若是打算前端Get請求後,回傳整個新的網頁,可以用傳統後端Express提供的res.render回傳ejs檔,再由新的ejs+ajax進行渲染。
Node.js 是後端的語言,如果要用後端處理,你就是要做頁面的刷新,而不是操作 dom。
這個情境多半就是 Node.js 提供查詢 api,前端 javascript 用 ajax 去查詢,獲得結果後去操作 dom 顯示結果狀態。