IHP - Unable to retrieve special characters from request body

Question

I'm trying to send the request using ajax:

    const formBody = document.getElementById('body'); // my form data
    const XHR = new XMLHttpRequest();
    const params = "body=" + formBody;
    
    XHR.open("POST", window.origin + '/CreateFormAction');
    XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    XHR.send(params);

The corresponding IHP action:

action CreatePostAction = do
        rBody <- getRequestBody
        putStrLn $ tshow rBody -- this returns: ""
        renderPlain "Request Received"

When I try sending special characters like '$', '+', etc., this is the request I get on server:

POST /CreatePostMessage
  Params: [("body"," ")]
  Request Body: body=+
  Accept: */*
  Status: 200 OK 0.025023s

Answer 1

You have to encode the formBody using encodeURIComponent() to encode special characters as follows:

const params = "body=" + encodeURIComponent(formBody);

Your IHP action should be able to handle special characters then.