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端界面上）的更多相关文章

  1. php单条件查询，关键字查询

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Ajax的一个实例及代码

    这是用ajax做的一个小小的应用!当选择menu1的时候,会出来menu里面所有的内容.同理对于menu2.多的不说,代码如下: 首先是inner.html文件 <html><hea ...

  3. SQL 语句在查询分析器执行很快，程序 Dapper 参数化查询就很慢（parameter-sniffing）

    这个问题困扰我好长时间了,使用SQLSERVER 事务探查器找到执行超时的SQL语句,参数查询都是通过执行exe sp_executesql 的存储过程调用,因为它能够分析并缓存查询计划,从而优化查询 ...

  4. Sqlserver Sql Agent Job 只能同时有一个实例运行

    Sqlserver Sql Agent中的Job默认情况下只能有一个实例在运行,也就是说假如你的Sql Agent里面有一个正在运行的Job叫"Test Job",如果你现在再去启 ...

  5. PHP 和 AJAX MySQL 数据库实例

    HTML 表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  7. .NET运用AJAX 总结及其实例

    1.AJAX简介 (1.没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的 ...

  8. Nginx做NodeJS应用负载均衡配置实例

    这篇文章主要介绍了Nginx做NodeJS应用负载均衡配置实例,本文直接给出配置实例,需要的朋友可以参考下. 负载均衡可以把用户的请求分摊到多个服务器上进行处理,从而实现了对海量用户的访问支持.负载均 ...

  9. Ajax实现异步操作实例_针对XML格式的请求数据

    js分类中有一节[原生js异步请求,XML解析]主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析,今天我将用一个实例来说明具体要如何操作. 前台的参数类型也是XML使 ...

随机推荐

  1. c++的重载运算符

    c++中允许重载运算符: 这是我辛苦的结果 #include"iostream"using namespace std;class aaa{ int x;public: aaa() ...

  2. eclipse设置汉化

    1. 打开eclipse->help->install new software 2. 打开http://www.eclipse.org/babel/downloads.php,,,找到相 ...

  3. 小米抢购(简单版v0.1)-登录并验证抢购权限，以及获取真实抢购地址

    小米(简单版)-登录并验证抢购权限,以及获取真实抢购地址! 并不是复制到浏览器就行了的   还得传递所需要的参数 这里只是前部分  后面的自己发挥了 { "stime": 1389 ...

  4. linux修改IP

     linux命令行修改IP的2个方法 2010-12-30 10:25:50 分类: LINUX 方式一: ifconfig eth0 192.168.1.18 netmask 255.255.255 ...

  5. python 学习

    python 使用 缩进 代替 C 中的 {}  或 delphi 中的 begin...end 1.help()  显示帮助或 help(<命令>) 2.字符串前加 r 表示原始字符串, ...

  6. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  7. asp之缓存 cachestate

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. Java课程设计——扫雷(winmine)

    因为是我的课程设计,要是有冲突就不好了,转载注明出处!!! 程序很简单,毕竟我是搞acm的,我就只介绍一下闪光点. 中心空白搜索的时候,我用的DFS: 有一点是要注意的,就是JFrame不支持重画,还 ...

  9. 税收基础知识 > 三税(营业税, 增值税, 所得税) + 关税

    三税:营业税 ▪ 增值税 ▪ 所得税 主要关注:一般纳税人, 起征点不详细描述. 营业税(Business tax) 营业税(Business tax),是对在中国境内提供应税劳务.转让无形资产或销售 ...

  10. FruitFrolic

    这是一个连连看小游戏,以 Unity2D 开发.因用了数种水果图片来做头像,所以游戏取名 FruitFrolic.同样,它也只是我闲时的练手. 少时曾玩过掌上游戏机里的俄罗斯方块及打飞机,及手机上的推 ...