nodejs(数据查询功能4)

本文介绍了在Node.js中实现数据查询功能的第四部分,主要讲解如何在页面上修改数据。通过添加修改按钮并绑定事件,当点击修改时,表格数据变为可编辑的文本框,显示原有数据。同时,修改按钮的文字变为‘确定’并绑定新的事件。在前端使用Ajax发送POST请求,设置Content-Type,后台接收并执行SQL更新操作,最后将操作结果反馈到前端。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

nodejs(数据查询功能4)

在页面修改数据

  1. 在初始化数据后面加上修改按钮并绑定事件;
  2. 点击修改时,

    1. 表格里面变成文本框,框内显示原来数据(event.target);

       var name=event.target.parentNode.parentNode.firstChild.nextSibling;
      var cellName=原来文本框的文字;//上面后面.innerHTML。取出文字;
      name.innerHTML="input文本框"<>;//动态替换成文本框;
      name.firstChild.value=cellName;//赋予文本框原来的文字;
      

      2.修改按钮里面文字变成确定并绑定事件;

      `var sure=event.target.parentNode.lastChild;
      sure.innerHTML="确定";
      event.target.onclick=updateEmp;`
      

      3.这里写图片描述
      4.这里写图片描述

  3. ajax前台发送;

    1. xhr.open("post","/updateEmp",true);
    2. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    3. xhr.send("id="+id+"&name="+name+"&job="+job+"&sal="+sal)
    4. //请求为post时,要设置Content-Type;send发送要模拟http 这样服务器才知道发送的内容
  4. 后台接收操作;
    1. sql语句:update emp set eName=?,job=?,sal=? where id=?
  5. 反馈到前台判读xhr.responseText的值;
    1. if(xhr.responseText=="1"){
      window.location.reload("public/main.html")
      }

1.数据库操作代码;

exports.updateEmp=function(id,name,job,sal,res){
    var conn=mysql.getConn();
    var sqlString="update emp set eName=?,job=?,sal=? where id=?";
    conn.query(sqlString,[name,job,sal,id],function(err,data){

        if(data.affectedRows!=0){
            res.send("1")
        }else{
            res.send("0")
        }
    })
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值