首页 > 解决方案 > 如何简单地在服务器端节点 JS 中创建 onClick 事件?

问题描述

我只是想要这个进行测试。

例如,这里是节点 JS 中的服务器代码。

正如我在下面提到的,我想正确而简单地制作 onclick 事件。

因为它只是为了测试客户端。

如何解决?像这样使用是错误的方式吗?

 http.createServer((request, response) => {
  return request
  .on('error', (err) => { 
    console.error(err);
  })
  .on('data', (data) => { 
      //data exists

    }).
  on('end',()=>{
    response.statusCode = 200; 
    response.writeHead(200, {'Content-Type':'text/html'});
    response.write('<html>'); 

    response.write('<h1> List</h1>'); 
    response.write('<button onclick="sendToServer(data)">submit</button>'); <--this line
    //I want to make onclick event for above 
    //but it excutes even user didnt click the button
    response.write('</html>'); 
   });
}).listen(3030);


function  sendToServer(data){
   request.post({
        headers: {
                  'Accept': 'application/json, text/plain, */*',
                  'Content-Type': "application/json"
                  },
            url:'https://...',
            body:JSON.stringify(data)
            }, function(e, r, body){
              console.log(body);
      });
 }

标签: javascriptnode.jswebserver

解决方案


  1. 您需要在服务器端实现 http 路由以侦听客户端请求

  2. 在客户端向服务器发送请求的功能(我使用了简单的 jquery ajax get 方法)

最后的工作代码在这里

var http = require('http');
var HttpDispatcher = require('httpdispatcher');;
var dispatcher = new HttpDispatcher();

http.createServer((request, response) => {
    return request
    .on('error', (err) => { 
      console.error(err);
    })
    .on('data', (data) => { 
        //data exists
    }).
    on('end',()=>{
      dispatcher.dispatch(request, response);
    });
  }).listen(3030);

  dispatcher.onGet("/", function(request, response) {
    response.statusCode = 200; 
    response.writeHead(200, {'Content-Type':'text/html'});
    response.write('<html>'); 
    response.write('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>');
    response.write('<script>function sendToServer(){$.ajax("/route").done(function(data){alert( data );});}</script>');
    response.write('<h1> List</h1>'); 
    response.write('<button onclick="sendToServer()">submit</button>');
    response.write('</html>');
    response.end();
  });

  dispatcher.onGet("/route", function(request, response) {
    response.end("Server responding!!!"); //call your any serverside function here
  });


推荐阅读