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. Jquery,jquery-cookie.js 做的点击记住用户名和密码！

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 2.MongoDB数据库简介

    1).简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  3. Javascript 中判断对象为空

    发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是 ...

  4. Swift_UI_UILabel

    Swift_UI_UILabel import UIKit class ViewController: UIViewController { override func viewDidLoad() { ...

  5. linux 报错 bash ‘/bin/sh: Syntax error: “(” unexpected

    今天用make 编译 蹦到 bash ‘/bin/sh: Syntax error: “(” unexpected 和 /bin/sh: [[: not found 这种莫名奇妙的错误 原因是是lin ...

  6. QT网络编程

    bool QAbstractSocket::waitForReadyRead(int msecs = 30000) bool QAbstractSocket::waitForDisconnected( ...

  7. 20145227&20145201 《信息安全系统设计基础》实验五

    北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)鄢曼君 李子璇 学号:(按贡献大小排名)20145227 20145201 成绩: ...

  8. [Linux系统]查看内存的几种方式

    1. cat /proc/meminfo 2.free -m3.vmstat -s4.ps命令可以实时的显示各个进程的内存使用情况.Reported memory usage information ...

  9. 精通AngularJS 读书笔记（2）

    AngularJS 速成 视图 因为AngularJS 依靠浏览器去解析模板,所以要保证模板是有效的HTML.尤其要小心闭合号HTML标签(未闭合好的标签不会产生任何错误信息,但会让视图不能正确渲染) ...

  10. 【转】Description Resource Path Location Type Java compiler level&n

    转载地址:http://blog.sina.com.cn/s/blog_ae96abfd0101qbq0.html 在项目上右键Properties->Project Facets,在打开的Pr ...