【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");
【Nodejs】使用put方式向后端查询数据并在页面显示的更多相关文章
- MySql查询数据令某字段显示固定值
我们用SQL查询数据时后,基于某些原因不想看到某字段的值,比如密码,我们可以通过创建视图,忽略某一字段的值. 同时我们也可以直接通过SQL语句来让其显示某个固定值: (1)一般查询语句: SELECT ...
- 【nodejs】使用put方式向后端提交数据
页面代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Ty ...
- nodejs做中间层,向后端取数据
var http=require('http'): http.get('http://baidu/dksapi/weiboLive/GetSquareLive?pagecount=1&pag ...
- HQL 查询数据 (获取页面输入的查询条件字段)
/* * 查询提取位置表所有数据 * */ public String ListEtlExtractPositionOfAll(){ // 接受数据库中传送的code int code = Integ ...
- 【Ajax】接收后台数据在html页面显示
Java代码 PrintWriter out=response.getWriter(); //向客户端发送字符数据 response.setContentType("text/text&qu ...
- jsp多条件查询及查询结果在同一页面显示(原创)
第一步,建立main.jsp页面,使用frameset分上下两个框架,上部是query.jsp.下部是detail .detail显示的是showdetail.jsp的页面 <title> ...
- 通过ajax GET方式查询数据,Django序列化objects
点击“查找2”按钮,通过ajax GET方式进行查询数据,这样页面不需要整体刷新,之后清空tbody数据,将查询结果重新附加到tbody 前端html: <div class="box ...
- GeoMesa Java API-写入与查询数据
GeoMesa Java API-写入与查询数据 写入数据 DataStore SimpleFeatureType SimpleFeature 写入 查询数据 几个常用查询条件 设置最大返回条目: 设 ...
- 使用ajax实现前后端是数据交互
ajax的概念 ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息.ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信.jquery ...
随机推荐
- Struts2 (中)
Struts中API介绍 ServletAPI 在使用Struts2的框架的过程中,发现Struts2和Servlet的API是解耦合的. 在实际开发中,经常使用到Servlet的API,比如进行登录 ...
- [BZOJ5317][JSOI2018]部落战争(闵可夫斯基和)
对于点集$A$,$B$,闵可夫斯基和$C=\{(x1+x2,y1+y2)|(x1,x2)\in A,(y1,y2)\in B\}$.由此可知,对于两个凸包$A$,$B$的闵可夫斯基和$C$满足,$C$ ...
- 【Dijkstra】POJ1062-昂贵的聘礼
由于物品编号从1开始,我们假定0也是一个物品作为起点,它到其它物品的距离就是各个物品的原始价值.开始时,如果两种物品主人的等级限制M在规定范围以内,且j能用i替换,则将优惠价格视作从i到j的一条权值为 ...
- hdu 5316 Magician(2015多校第三场第1题)线段树单点更新+区间合并
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5316 题意:给你n个点,m个操作,每次操作有3个整数t,a,b,t表示操作类型,当t=1时讲a点的值改 ...
- Pyhton 编程风格
博文概要:1.Python语句和语法2.Python标识符3.基本编程风格 一.Python语句和语法 1.可以从一行的任何地方开始2.续行 \: ''':闭合操作符,单一语句跨多行 3.代码组 .缩 ...
- vue各生命周期适合做的业务逻辑
一.实际项目中使用最多的Vue生命周期大概是 created mounted updated 二.各自适合做的业务逻辑 1. created 相当于是页面刚开始加载的状态,此时不能操作实例的 ...
- Windows Performance Toolkit
http://bigasp.com/archives/606 https://randomascii.wordpress.com/category/xperf/ ADK 8.0 (C:\Progra ...
- C/C++服务器开发的必备利器–libconfig
http://www.leoox.com/?p=311 程序肯定需要一份配置文件,要不然,自己的程序不是“可配置”的,自己都不好意思往“高大上”靠拢.言归正传,以前自己写代码,配置文件的读写都是各式各 ...
- [Asp.net web api]缓存
摘要 为了提高接口的性能,我们常做的优化就包括缓存,对经常访问但变化不大的数据进行缓存.或者使用http的缓存,减少请求的次数. web api缓存 在提供的api,我们也可以实现缓存,来减少访问的次 ...
- Selenium2+python自动化61-Chrome您使用的是不受支持的命令行标记:--ignore-certificate-errors
前言 您使用的是不受支持的命令行标记:--ignore-certificate-errors.稳定性和安全性会有所下降 selenium2启动Chrome浏览器是需要安装驱动包的,但是不同的Chrom ...