Node. js Obtains request information submitted by front end ajax

  • 2021-07-22 08:48:53
  • OfStack

Today, see how Node. js obtains request information submitted by ajax

As we all know, ajax can realize partial refresh without refreshing the whole page. This is a very good way to update information dynamically. Today, we will look at how to use node to receive the information submitted by the front-end ajax

Below I post 1 under the front-end code
index. html code I will not post, because there is only one button, to achieve the function is to click the button to submit ajax asynchronous request

Mainly post the code of js page under 1


$("button").on("click",function(){
  // Submit ajax Request 
  $.ajax({
    url:"http://localhost:9999",
    data:{name:'xiaoming',age:19},
    type:"POST",
    dataType:"json",
    async:true,
    timeout:5000,
    complete:function(){
      console.log("end");
    },
    success:function(data,textStatus,jqXHR){
      console.log(data);
      console.log(textStatus);
      console.log(jqXHR);
    },
    error:function(textStatus,jqXHR){
      console.log("error");
      console.log(textStatus);
      console.log(jqXHR);
    }
  });
});

In this way, we have submitted an ajax request asynchronously to the server.

Because my server is written with node, I post the code of node. js


/**
 * New node file
 */

// Load module 
var http = require("http");
function onRequest(req,resp){
  // Get ajax Information submitted 
  req.on("data",function(data){
    // Print 
    console.log(decodeURIComponent(data));
  });
  // Return response
  resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
  // Return the tail of the response 
  resp.end();
}

// Create a server 
http.createServer(onRequest).listen(9999);

The result obtained by the server is as follows:


name=xiaoming&age=19

At first glance, it is very simple to get the request information of ajax. I created a server in node, then added data event to request, and made a callback processing, and then I can get the data submitted by ajax

However, in this case, we still can't use this data flexibly. We must use split to separate name from age, which is quite inconvenient.

So we thought of using querystring to parse the json object, which we only need to modify the code just one time to achieve


/**
 * New node file
 */

// Load module 
var http = require("http");
var qs = require("querystring");
function onRequest(req,resp){
  // Get ajax Information submitted 
  var currentData = "";
  req.on("data",function(data){
    // Print 
    currentData += data;
    console.log(qs.parse(currentData));
  });
  // Return response
  resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
  // Return the tail of the response 
  resp.end();
}

// Create a server 
http.createServer(onRequest).listen(9999);

The following is the result of the run


{ name: 'xiaoming', age: '19' }

We can also load it into a variable and use its various attributes


var temp = qs.parse(data);
console.log(temp.name);
console.log(temp.age);

Related articles: