Nodejs 之Ajax的一个实例(sql单条件查询&并显示在Browser端界面上)

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 οnclick="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;

转载于:https://www.cnblogs.com/potato-lee/p/6252782.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值