Nodejs 之Ajax的一个实例（sql单条件查询&并显示在Browser端界面上）
1.Broswer端的Ajax
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>登录成功</h1>
<input type="text" id="username"/>
<input type="text" id="address"/>
<button onclick="queryAll()">查询</button>
<div>
<table border="1" cellspacing="0" cellpadding="10" width="500px" id="mytable">
<tr><th>id</th><th>Name</th><th>Password</th><th>Address</th></tr>
</table>
</div>
<script>
function queryAll(){
var xhr;
var mytable=document.getElementById("mytable");
var usernameStr=document.getElementById("username").value;
var addressStr=document.getElementById("address").value;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft","XMLHTTP")
}
// xhr.open("get","queryAll.do？username"+usernameStr,true);//只有get方法才可以把参数加在这里
xhr.open("post","queryAll.do",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//content-type只有在为post方法的时候才配置 xhr.onreadystatechange=function(){
mytable.innerHTML="<tr><th>id</th><th>Name</th><th>Password</th><th>Address</th></tr>";
//每次刷新html数据的时候，就先会把table清空，然后再添加数据
if(xhr.readyState==4&&xhr.status==200){
// console.log(xhr.responseText);
var datalist=JSON.parse(xhr.responseText);//用json将服务器返回的字符串转换成了数组对象
for(var i=0;i<datalist.length;i++){
console.log(datalist[i].id);//通过属性获取值，datalist[i]是属性
console.log(datalist[i].U_name);
console.log(datalist[i].U_pwd);
console.log(datalist[i].U_address);
mytable.innerHTML=mytable.innerHTML+"<tr><td>"+datalist[i].id+"</td><td>"
+datalist[i].U_name+"</td><td>"
+datalist[i].U_pwd+"</td><td>"
+datalist[i].U_address+"</td></tr>";
}
}
};
//xhr.send(null);//get方法下使用这个发送Ajax请求
xhr.send("username="+usernameStr)//post方法将发送的参数写在这里 }
</script>
</body>
</html>
2.Server端的响应：
queryUserAll:function(request,response){
console.log(request.body);
let name=request.body.username;
let address=request.body.address;
let sql="select * from t_use where U_name like ?";//单条件查询
name="%"+name+"%";
dbconfig.getconnectionSql(sql,[name],function(err,data){
if(err==null||err==undefined){
//response.write(data);//原生的nodejs方法便发送不出去，因为data是一个object，不是字符串
//方法一
//response.write(JSON.stringify(data));//将data的object对象转换成了字符串。**从数据库中返回的data都是object类型，不是针对Ajax请求
//response.end();
//方法二
response.send(data);//express框架自动将数组对象转换成了字符串,
// response.send(data)就相当于response.write(JSON.stringify(data)
console.log(typeof data);//打印出来是object
}
})
}
3.主文件app.js中的：
app1.post("/queryAll.do",useModule.queryUserAll);
Tips:
1>Ajax只更新本html中的数据;
2>B端发起Ajax请求，与S端交互进行数据操作，且**S端返回的是数据（是object类型），需要在B端用JSON进行转换（JSON.parse(xhr.responseText)）转换成数组对象;
3>Ajax是通过DOM来更新查询数据，且只更新部分数据，不会刷新整个网页的数据，像一个应用程序一样；
4>通过数据库查询返回的data都是object类型，不是针对Ajax；
Nodejs 之Ajax的一个实例（sql单条件查询&并显示在Browser端界面上）的更多相关文章
- php单条件查询，关键字查询
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Ajax的一个实例及代码
这是用ajax做的一个小小的应用!当选择menu1的时候,会出来menu里面所有的内容.同理对于menu2.多的不说,代码如下: 首先是inner.html文件 <html><hea ...
- SQL 语句在查询分析器执行很快，程序 Dapper 参数化查询就很慢（parameter-sniffing）
这个问题困扰我好长时间了,使用SQLSERVER 事务探查器找到执行超时的SQL语句,参数查询都是通过执行exe sp_executesql 的存储过程调用,因为它能够分析并缓存查询计划,从而优化查询 ...
- Sqlserver Sql Agent Job 只能同时有一个实例运行
Sqlserver Sql Agent中的Job默认情况下只能有一个实例在运行,也就是说假如你的Sql Agent里面有一个正在运行的Job叫"Test Job",如果你现在再去启 ...
- PHP 和 AJAX MySQL 数据库实例
HTML 表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- .NET运用AJAX 总结及其实例
1.AJAX简介 (1.没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的 ...
- Nginx做NodeJS应用负载均衡配置实例
这篇文章主要介绍了Nginx做NodeJS应用负载均衡配置实例,本文直接给出配置实例,需要的朋友可以参考下. 负载均衡可以把用户的请求分摊到多个服务器上进行处理,从而实现了对海量用户的访问支持.负载均 ...
- Ajax实现异步操作实例_针对XML格式的请求数据
js分类中有一节[原生js异步请求,XML解析]主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析,今天我将用一个实例来说明具体要如何操作. 前台的参数类型也是XML使 ...
随机推荐
- 。。。学习CSS3的第一个属性border-radius。。。
学习border-radius,感觉这个文档写的很不错: http://blog.sina.com.cn/s/blog_61671b520101gelr.html
- there are no packages available for installation插件安装问题和如何配置浏览器的快捷键
sublime text3 在安装插件时,有时候会莫名其妙的弹出如下所示的弹窗(之前遇到了,但写的时候不知道为什么我的又可以了,这个只是出现了这个问题之后可以尝试的一个解决办法,图片就从网上找了一个) ...
- WebApi 通过类名获取类并实例化
环境:Web Api 返回值类型为DTO实体,继承基类DTO---BaseResultDto public class BaseResultDto { /// <summary> /// ...
- android 流量 压缩
引用:http://my.eoe.cn/blue_rain/archive/340.html 对于目前的状况来说,移动终端的网络状况没有PC网络状况那么理想.在一个Android应用中,如果需要接收来 ...
- Ubuntu14.04运行行roscore错误
错误提示: 网络配置有问题,ping不同自己(ping localhost). vim ~/.bashrc 在底部加入: export ROS_HOSTNAME=localhostexport ROS ...
- Kernel Time和User Time分别指什么
比如你的一个程序读取并分析一个文件,读取时会调用系统接口,系统会调用驱动来从物理设备上读取数据这个就是kernel time,除此以外在你自己进程上下文中执行代码占用的时间就是user time了. ...
- Python语言十分钟快速入门
Python(蟒蛇)是一种动态解释型的编程语言.Python可以在Windows.UNIX.MAC等多种操作系统上使用,也可以在Java..NET开发平台上使用. AD:[51CTO技术沙龙]移动时代 ...
- Java类的基本运行顺序是怎样
我们以下面的类来说明一个基本的 Java 类的运行顺序: public class Demo{ private String name; private int age; public Demo(){ ...
- .net常见的面试题
1,asp.net中的页生命周期 答:msdn官网已给出标准答案,这里简述一下:页要经历下表概述的8个阶段.除了页生命周期阶段以外,在请求前后还存在应用程序阶段,但是这些阶段并不特定于页. 而这8个阶 ...
- 非常好的Oracle教程【转】
http://www.blogjava.net/kiant/articles/234781.html Oracle 笔记(四).SQL 几个要点 附录: 1.SQL 简介 2.SQL 操作符 3.Or ...