How to get data when using ES6 fetch in Struts2?

Question

Action code:

public class ContentAction extends ActionSupport {

  private String menuName;

  public String getMenuName() {
    return menuName;
  }

  public void setMenuName(String menuName) {
    this.menuName = menuName;
  }
}

js code:

  import "es6-promise/auto";
  import fetch from 'isomorphic-fetch'

  export function postAction(action,url,params=[]) {
    return function (dispatch) {
      const data = params;
      return fetch(url,{
        method:"POST",
        body:data//data=Object{menuName:"index"}
      })
      .then(response => response.json())
      .then(json =>dispatch(action(json)))
    }
}

but when project run, menuName is null in action.

I try to use key-value pair:

import "es6-promise/auto";
import fetch from 'isomorphic-fetch'

export function postAction(action,url,params=[]) {
    return function (dispatch) {
      const data = Object.keys(params).map(key =>
            encodeURIComponent(key)+"="+ encodeURIComponent(params[key])).join('&');
      return fetch(url,{
        method:"POST",
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
        body:data//data="menuName=index"
      })
      .then(response => response.json())
      .then(json =>dispatch(action(json)))
    }
}

use JSON:

export function postAction(action,url,params=[]) {
    return function (dispatch) {
      const data = JSON.stringify(params);
      return fetch(url,{
        method:"POST",
        headers:{'Content-Type':'application/json'},
        body:data//data="{"menuName":"index"}"
      })
      .then(response => response.json())
      .then(json =>dispatch(action(json)))
    }
}

use FormData:

export function postAction(action,url,params=[]) {
    return function (dispatch) {
      const data = new FormData();
      Object.keys(params).map(key =>
           data.append(encodeURIComponent(key),encodeURIComponent(params[key])));
      return fetch(url,{
        method:"POST",
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
        body:JSON.stringify(data)//data.get("menuName")="index"
      })
      .then(response => response.json())
      .then(json =>dispatch(action(json)))
    }
}

all of above can not work (menuName=null in action).

---

but if I append key-value pair to URL directly, it works (menuName=index in action):

import "es6-promise/auto";
import fetch from 'isomorphic-fetch'

export function postAction(action,url,params=[]) {
    return function (dispatch) {
      const data = Object.keys(params).map(key =>
            encodeURIComponent(key)+"="+ encodeURIComponent(params[key])).join('&');
      return fetch(url + "?" + data,{//url.action?menuName=index
        method:"POST"
      })
      .then(response => response.json())
      .then(json =>dispatch(action(json)))
    }
}

but I think this way should not be standard，it is not even post. So Where did I make a mistake?

Answer 1

If you define a method:'POST' then a method is used is POST regardless of query string parameters.

You should use URLSearchParam to build the the string of parameters in x-www-form-urlencoded format.

const uparams = new URLSearchParams();
Object.keys(params).map(key =>
            uparams.append(key, params[key]));
fetch(url,{
    method:"POST",
    headers:{'Content-Type':'application/x-www-form-urlencoded'},
    body:uparams//data="menuName=index"
  })