Express的Ajax实践

对于Ajax一直理解不是很深，正好这次需要用到，做个记录。

首先的前端代码：

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <!-- 引入jquery.js -->
  <script src="javascripts/jquery-3.1.1.min.js"></script>
  <!-- 引入echarts.js -->
  <script src="javascripts/echarts.min.js"></script>
</head>
<body>

  <h1><%= title %></h1>

  <p>Welcome to <%= title %></p>
  <input type="text" value="5000">
  <button class="button">点击发送</button>
  <div class="div01">

  </div>


  <script type="text/javascript">

     $('.button').on('click',function (e) {
         var txt = $('input').val();
         $.ajax({
             url:'/test',
             type:'get',
             data:{name:txt},
             dataType:'json',
             success:function (result) {
                 alert('传输成功');
                 $('.div01').html(result.tips)
             },
             error:function (msg) {
                 alert('系统发生错误');
             }
         })
     })

  </script>

</body>
</html>

后端进行接收和处理：

var express = require('express');
var router = express.Router();

var submessage = '';

// 导入mysql模块
var mysql = require('mysql');


// 连接到mysql
var connection = mysql.createConnection({      //创建mysql实例
    host:'127.0.0.1',
    port:'3306',
    user:'root',
    password:'',
    database:'test'
});
connection.connect();
var sql = 'SELECT * FROM tvalues';
var str = " ";
connection.query(sql, function (err,result) {
    if(err){
        console.log('[SELECT ERROR]:',err.message);
    }
    str = JSON.stringify(result);
    //数据库查询的数据保存在result中，但浏览器并不能直接读取result中的结果，因此需要用JSON进行解析
    //console.log(result);   //数据库查询结果返回到result中
    console.log(str);
});


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: str });
});

router.get('/test',function (req,res) {

    //接收传过来的数据
    var name = req.query.name;


    /*接收MQTT协议数据*/
    var mqtt = require('mqtt')
    var fs = require('fs')

    var client  = mqtt.connect('mqtt://127.0.0.1:61613',{username:"admin",password:"password"})

    client.on('connect',function () {
        //把页面输入的name数据，作为时间间隔，传输给MQTT服务器。
        client.subscribe('world');
        client.publish('world',name);
    })

    client.on('message', function (topic, message) {

      console.log(typeof message);
      submessage = message.toString();
      console.log(message.toString());
      client.end();

    })

    var ajaxTest = {
        tips:name
    };

    res.send(ajaxTest);
})

connection.end();

module.exports = router;

这次只是使用了get的请求方法。

参考文章：

https://www.zhihu.com/question/28470466
https://www.cnblogs.com/xuange306/p/5975828.html
https://blog.csdn.net/cdnight/article/details/50857586
https://cnodejs.org/topic/50d01507637ffa4155a9f359
https://blog.csdn.net/u012251421/article/details/49493561
http://www.w3school.com.cn/jquery/ajax_post.asp
https://www.cnblogs.com/yoyotl/p/5091888.html
https://blog.csdn.net/educast/article/details/72724368
http://www.runoob.com/nodejs/nodejs-mysql.html
https://www.cnblogs.com/zhuzhenwei918/p/7252602.html

Express会话控制：https://blog.csdn.net/mutouafangzi/article/details/77533002

猜你喜欢