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. java随笔

    java与c++的几点区别 (1)Java比C++程序可靠性更高.有人曾估计每50行C++程序中至少有一个BUG.姑且不去讨论这个数字是否夸张,但是任何一个C++程序员都不得不承认C++语言在提供强大 ...

  2. UIAlertController警告视图和操作表单

    //创建一个myAlert1操作表单对象(UIAlertControllerStyleActionSheet为操作表单,UIAlertControllerStyleAlert为警告视图) UIAler ...

  3. sql查询指定表外键约束

    //////////////////查询指定表外键约束select a.name as 约束名, object_name(b.parent_object_id) as 外键表, d.name as 外 ...

  4. react.js语法为了更好的兼容可以选以下这种方法配置即可

    首先下一个sublime text3 的编辑器: 支持大家使用正版,不过我是为了方便才所以这版本而已... 地址: http://sublimetext.iaixue.com/forum.php?mo ...

  5. mono支持gb2312

    需要安装mono-locale-extras 输入命令 yum install -y mono-locale-extras 安装即可

  6. AppSettings从数据库读取

    /// <summary> /// 提供对配置信息的访问 /// </summary> public static class AppSettings { /// <su ...

  7. WSF脚本详解：组合JS和VBS代码

    1.概述 Windows Script Host除了提供一个对象模型之外,还提供了一种脚本框架,这就是WSF脚本.通过WSF约定的标记元素,可以将多种脚本语言写的代码块组合起来,完成任务.除此之外,还 ...

  8. nextAll([expr])

    描述: 给第一个div之后的所有元素加个类 HTML 代码: <div></div><div></div><div></div> ...

  9. spine实现预加载(一)

    前言 本文实现了spine动画的预加载,解决在战斗等大量加载spine动画的时候出现卡顿现象. 这里使用和修改三个类,直接修改的源码,当然你也可以继承LuaSkeletonAnimation,自己封装 ...

  10. 课程设计 --- 黑白棋中的 AI

    原文链接:https://www.dreamwings.cn/reversi/3013.html 到了考试周了佯,可是偏偏这个时候迎来了很多很多的课程设计,幸好教授把C语言的课程设计提前发出了,不然都 ...