zoukankan      html  css  js  c++  java
  • 【Nodejs】使用put方式向后端查询数据并在页面显示

    前端代码:

    <!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");
  • 相关阅读:
    eclipse export runnable jar(导出可执行jar包) runnable jar可以执行的
    mave常用指令
    771. Jewels and Stones珠宝数组和石头数组中的字母对应
    624. Maximum Distance in Arrays二重数组中的最大差值距离
    724. Find Pivot Index 找到中轴下标
    605. Can Place Flowers零一间隔种花
    581. Shortest Unsorted Continuous Subarray连续数组中的递增异常情况
    747. Largest Number At Least Twice of Others比所有数字都大两倍的最大数
    643. Maximum Average Subarray I 最大子数组的平均值
    414. Third Maximum Number数组中第三大的数字
  • 原文地址:https://www.cnblogs.com/heyang78/p/8776762.html
Copyright © 2011-2022 走看看