2016年4月13日 星期三

使用純javascript發出HTTP method POST

在網路上搜尋資料,大部分實現AJAX(以POST為例)的範例大概都是

1. 使用jQuery的AJAX功能

2. 使用form,並且方法使用POST

如:<form action="http://foo.com" method="post">


而現在想要達成的功能是

1. 發出POST request,且URL不改變

2. 不使用其他Library

這時候就不能使用form的action了

瀏覽器會幫你把頁面跳轉,此時URL就會改變了

後來在 http://youmightnotneedjquery.com/ 找到我想要的寫法
var request = new XMLHttpRequest();
request.open('POST', '/newindex', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
    console.log(resp);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

而我的server side是使用node.js + express

var express = require('express');

var app = express();

app.use(express.static(__dirname + '/public'));
app.post('/newindex', function(req, res){
  console.log("req received!");
  res.send('This is POST METHOD');
})

app.listen(8888);

沒有留言:

張貼留言