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. IOS关于不同字体和不同颜色的选择

    在项目中,用到一个功能,就是不同文字和不同颜色字体选择, 界面如下:,效果如下: 这个功能主要用到了textview的几个代理办法,其中一个重要的问题就是,在英文下和英文下的不同判断方式,以及是否有追 ...

  2. 2.1 C#的关键字

    关键字是被C#规定了用途的重要单词.在visual studio中,关键字以蓝色字体显示.图中红色方框圈起来的就是关键字. 关键字 class ,这个关键字的用途是声明类.比如上面例子中,类名叫做Pr ...

  3. aspcms，2.x以上版本，保护栏目不可删除处理方法

    aspcms,2.x以上版本,保护栏目不可删除处理方法.首先找到\admin\_content\_Sort\AspCms_SortFun.asp这个文件.然后将if  isnul(id) then a ...

  4. sqlserver中DATE类型的数据转化 CONVERT

    主要描述的是SQL Server使用convert取得datetime日期数据的实际操作流程,在实际操作中用SQL Server数据库中用convert来获取datetime日期数据,以下实例包含各种 ...

  5. 我的archlinux中安装的关于xfce4的软件

    包括一些panel的插件: xfce4-appfinder - xfce4-battery-plugin - xfce4-eyes-plugin - xfce4-mixer - xfce4-netlo ...

  6. 【转】Delphi+Halcon实战一：两行代码识别QR二维码

    Delphi+Halcon实战一:两行代码识别QR二维码 感谢网友:绝代双椒( QQ号应原作者要求隐藏了:xxxx6348)的支持 本文是绝代双椒的作品,因为最近在忙zw量化培训,和ziwang.co ...

  7. android.widget.Toast

    widget 小部件 toast 烤面包 Toast.makeText(当前活动, 信息, 时间长短) 例:Toast.makeText(FirstActivity.this, "You c ...

  8. SSAS中事实表中的数据如果因为一对多或多对多关系复制了多份，在维度上聚合的时候还是只算一份

    SSAS事实表中的数据,有时候会因为一对多或多对多关系发生复制变成多份,如下图所示: 图1 我们可以从上面图片中看到,在这个例子中,有三个事实表Fact_People_Money(此表用字段Money ...

  9. 在SQL Server 2005中连接Oracle，完成查询、插入操作

    建立指向Oracle的连接假设Oracle数据库的用户名为test,密码为test,在SQL Server数据库所在服务器上建立的指向Oracle数据库的服务命名为hisorcl.1. 在SQL Se ...

  10. 关于获取web应用的文件路径的注意事项

    今天在把数据写入文件时遇到了一个问题,指定的文件获取不到.一开始是这样的 URL url = XXX.class.getClassLoader().getResource(fileName);File ...