前端代码：

<!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. 【推导】【数学期望】【冒泡排序】Petrozavodsk Winter Training Camp 2018 Day 5: Grand Prix of Korea, Sunday, February 4, 2018 Problem C. Earthquake

    题意:两地之间有n条不相交路径,第i条路径由a[i]座桥组成,每座桥有一个损坏概率,让你确定一个对所有桥的检测顺序,使得检测所需的总期望次数最小. 首先,显然检测的时候,是一条路径一条路径地检测,跳跃 ...

  2. SnackDown Longest Increasing Subsequences 构造题

    Longest Increasing Subsequences 题目连接: https://www.codechef.com/SNCKPA16/problems/MAKELIS Description ...

  3. Xcode更新后插件失效解决办法

    defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID 获取新版xcode的uuid Xcode6 ...

  4. TensorFlow安装和HelloWorld

    TensorFlow安装 TensorFlow可以在各种操作系统上面安装.安装的时候要注意TensorFlow的类型,一种是普通的版本,仅支持CPU,安装简单.另外一种类型带GPU的,可以利用GPU来 ...

  5. Java线程锁&分布式锁的理解及应用

    了解Java线程锁之前,先理解线程和进程的定义.进程是操作系统分配资源(CPU)的基本单位,线程是CPU执行的基本单位,一个进程可拥有多个线程,同进程间的多个线程共享分配给进程的资源.比如启动JVM时 ...

  6. 特殊字符\u2028导致的Javascript脚本异常

    这原本是个小错误,但排查花了不少时间,因此写下来和大家分享一下. 起因 通过Ajax动态从后台读取文章内容,并显示在页面上,加载到某篇文章的时候,报javascript语法错误,无法显示文章内容. A ...

  7. SSH深度历险（四） Maven初步学�

    这几天接触这个词,非常多遍了,仅仅是浅显的体会到它在GXPT中的优点,功能之强大,又通过网络查询了资料进一步的认识学习了,和大家分享. Maven是基于项目对象模型(POM),能够通过一小段描写叙述信 ...

  8. C#和C++中char类型的区别

    对于char,这个字符类型.我们一般都认为就是一个字节.今天在仔细比较发现,C#的char和C++的char是有区别的. 1.首先来看C#中char占多大空间 using System;using S ...

  9. MVC使用Gantt Chart实现甘特图,管理事情进度

    借助"甘特图",可以直观地了解任务.活动.工作的进度.dhtmlxGantt是一个开源的Javacirpt库,能帮助我们快速创建"甘特图",本篇体验在MVC中的 ...

  10. Quartz Job执行后再更新Job的时间表达式....

    CronTrigger 表达式最大循环时间是1年?那么实际应用中的提醒超过1年怎么办呢? 先看一下界面: 参数说明:提前提醒时间:1-60分钟.1-24小时.1-90天:重复提醒:每1-59分钟.每1 ...