前端代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <head>
  <title>get data from db</title>
 </head>

 <body>
  <form id="form1">
    用户名：<input type="text" id="username" name="name" value=""><br/>
    <input type="button" value="查询" onclick="search();"/>
  </form>

  <table border="1">
    <tr>
        <th>Id</th><th>name</th><th>password</th>
    </tr>
    <tbody id="mytable">
    </tbody>
  </table>
 </body>
</html>
<script type="text/javascript">
<!--
function search(){

    var obj={
        name:document.getElementById("username").value,
    };

    var xhr=new XMLHttpRequest();
    xhr.open('put','index.html',true);

    xhr.onload=function(e){
        if(this.status==200){
            var arr=JSON.parse(this.response);
            updateTable(arr);
        }
    };

    xhr.send(JSON.stringify(obj));
}

function updateTable(arr){
    var table=document.getElementById("mytable");

    for(var i=table.childNodes.length-1;i>=0;i--){
        table.removeChild(table.childNodes[i]);
    }

    for(var i=0;i<arr.length;i++){
        var emp=arr[i];

        var tr=document.createElement("tr");

        var td1=document.createElement("td");
        td1.appendChild(document.createTextNode(emp.id));
        tr.appendChild(td1);

        var td2=document.createElement("td");
        td2.appendChild(document.createTextNode(emp.name));
        tr.appendChild(td2);

        var td3=document.createElement("td");
        td3.appendChild(document.createTextNode(emp.password));
        tr.appendChild(td3);

        table.appendChild(tr);
    }
}

//-->
</script>

运行情况截图：

后端代码：

'use strict';

var express=require('express');
var http=require('http');
var fs=require('fs');

var app=express();

var mysql=require('mysql');
var pool=mysql.createPool({
    host:'127.0.0.1',
    port:'3306',
    database:'test',
    user:'root',
    password:'12345678',
});

app.get('/index.html',function(req,rsp){
    rsp.sendFile(__dirname+'/index.html');
});

app.put('/index.html',function(req,res){
    req.on('data',function(data){
        var obj=JSON.parse(data.toString());// 取得Ajax提交的参数
        console.log(obj);

        pool.getConnection(function(err,connection){
            if(err){
                res.send('Can not connect to MySql DB');
                console.log(err);
            }else{

                var str;
                connection.query("select * from emp where name like ? ","%"+obj.name+"%",function(err,result){
                    if(err){
                        str='Search failed';
                    }else{
                        str="Search succeed";
                    }
                    console.log(str);
                    console.log("result.length="+result.length);

                    var arr=[];
                    for (var i=0; i<result.length; i++) {
                        var tmp = result[i];
                        var emp=new Object;
                        emp.id=tmp['Id'];
                        emp.name=tmp['name'];
                        emp.password=tmp['password'];

                        arr.push(emp);
                    } 

                    connection.release();
                    res.send(JSON.stringify(arr));
                })
            }
        });
    });
});

app.listen(8080,"127.0.0.1");

【Nodejs】使用put方式向后端查询数据并在页面显示的更多相关文章

  1. MySql查询数据令某字段显示固定值

    我们用SQL查询数据时后,基于某些原因不想看到某字段的值,比如密码,我们可以通过创建视图,忽略某一字段的值. 同时我们也可以直接通过SQL语句来让其显示某个固定值: (1)一般查询语句: SELECT ...

  2. 【nodejs】使用put方式向后端提交数据

    页面代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Ty ...

  3. nodejs做中间层，向后端取数据

    var  http=require('http'): http.get('http://baidu/dksapi/weiboLive/GetSquareLive?pagecount=1&pag ...

  4. HQL 查询数据 （获取页面输入的查询条件字段）

    /* * 查询提取位置表所有数据 * */ public String ListEtlExtractPositionOfAll(){ // 接受数据库中传送的code int code = Integ ...

  5. 【Ajax】接收后台数据在html页面显示

    Java代码 PrintWriter out=response.getWriter(); //向客户端发送字符数据 response.setContentType("text/text&qu ...

  6. jsp多条件查询及查询结果在同一页面显示（原创）

    第一步,建立main.jsp页面,使用frameset分上下两个框架,上部是query.jsp.下部是detail .detail显示的是showdetail.jsp的页面 <title> ...

  7. 通过ajax GET方式查询数据，Django序列化objects

    点击“查找2”按钮,通过ajax GET方式进行查询数据,这样页面不需要整体刷新,之后清空tbody数据,将查询结果重新附加到tbody 前端html: <div class="box ...

  8. GeoMesa Java API-写入与查询数据

    GeoMesa Java API-写入与查询数据 写入数据 DataStore SimpleFeatureType SimpleFeature 写入 查询数据 几个常用查询条件 设置最大返回条目: 设 ...

  9. 使用ajax实现前后端是数据交互

    ajax的概念 ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息.ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信.jquery ...

随机推荐

  1. An ac a day,keep wa away

    zoj 初学者题: 1001 1037 1048 1049 1051 1067 1115 1151 1201 1205 1216 1240 1241 1242 1251 1292 1331 1334 ...

  2. ZeptoLab Code Rush 2015 C. Om Nom and Candies 暴力

    C. Om Nom and Candies Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/526 ...

  3. CDOJ 42/BZOJ 2753 滑雪与时间胶囊 kruskal

    2753: [SCOI2012]滑雪与时间胶囊 Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 1376  Solved: 487[Submit][St ...

  4. 关于多重嵌套的JSON数据解析

    最近项目中需要封装一套复杂的数据模型返回给前端,大致就是一个用户会有多笔订单,每个订单下可能会有多笔保单, 大致的数据模型如下: 为了方面描述,先看一下一个用户下有一条订单,一条订单下有一个保险订单的 ...

  5. 关于Vue的一些小技巧

    前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知 ...

  6. The YubiKey -- HOW IT WORKS

    A single YubiKey has multiple functions for protecting access to your email, your apps and your phys ...

  7. 利用Jenkins实现JavaWeb项目的自动化部署

    修改代码,打包,上传,重启... 大把的时间花费在这些重复无味的工作上.笔者与当前主流的价值观保持一致:我们应该把时间花费在更有意义的事情上.我们可以尝试借助一些工具,让这些重复机械的工作交给计算机去 ...

  8. make mrproper and make clean

    make mrproper命令会删除所有的编译生成文件.内核配置文件(.config文件)和各种备份文件,所以几乎只在第一次执行内核编译前才用这条命令. make clean命令则是用于删除大多数的编 ...

  9. Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

    本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdo ...

  10. springboot线程池的使用和扩展

    我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行,今天我们就来实战体验这个线程池服务: 本 ...