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. HUD 5050 Divided Land

    http://acm.hdu.edu.cn/showproblem.php?pid=5050 题目大意: 给定一个矩形的长和宽,把这个矩形分成若干相等的正方形,没有剩余.求正方形的边长最长是多少. 解 ...

  2. C#利用微软库完成设备网络定位(经纬度-地址)

    public delegate void OnPositionChangedEventHandle(object sender, PositionChangedEventArgs e); public ...

  3. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  4. SQL语句大全（转载）

    经典SQL语句大全 一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql serv ...

  5. 终于解决各种动画问题了，感谢雨松MOMO

    http://www.xuanyusong.com/archives/2222 看懂了,什么问题关于动画的都可以解决的,加油!

  6. liunx 远程拷贝到本地

    此句在本地git bash 执行,就能拷贝远程的目录 scp -r  userName@remote:/var/www/views/log/*.* ~/Desktop

  7. 未能加载文件或程序集“projectname, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项。系统找不到指定的文件。

  8. vim如何配置go语言环境

    go语言没有如source insight般优秀的编辑器,试用了多种,vim算最好的,其次可以用liteide(有反查变量函数引用点.修改行变色功能),两者可配合使用. 更新:最好的是idea+go插 ...

  9. PHP开发中的缓存技术汇总

    在PHP开发中,出于对网站服务器负载的考虑,往往需要对页面.数据等内容进行缓存处理,下面就来看看,在PHP开发中有哪些缓存方式吧. 1.页面部分缓存该种方式,是将一个页面中不经常变的部分进行静态缓存, ...

  10. Redis的Replication(复制)

    文件并发(日志处理)--队列--Redis+Log4Net 分布式中使用Redis实现Session共享(二) http://www.cnblogs.com/stephen-liu74/archive ...