post form data as json

[setop]

Hi all,

I'm using sqlpage.request_body to implement a REST API. Works fine when testing with curl.

I'm trying to use form component to test this API. Unfortunately, the form posts urlencoded data, not JSON data and request_body is not able to retrieve them.

Is there any solution in sqlpage or I should move to JS ?

[lovasoa]

Yes, you can do that either in js with a small script

document.querySelector('form').addEventListener('submit', async e => {
  e.preventDefault();
  
  const data = Object.fromEntries(new FormData(e.target));
  
  const res = await fetch(e.target.action, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
});

or do it in sqlpage in two steps:

SELECT 'form' AS component, 'form1_process.sql' AS action, 'Next' AS validate;
SELECT 'name' AS name, 'Name' AS label, TRUE AS required;
SELECT 'email' AS name, 'Email' AS label, 'email' AS type, TRUE AS required;
SELECT 'age' AS name, 'Age' AS label, 'number' AS type;

-- Create a JSON object from the form data
SET json_data = json_object(
  'name', :name,
  'email', :email,
  'age', :age
);

-- Use sqlpage.fetch to send the JSON data to the second handler
SET result = sqlpage.fetch(json_object(
  'url', 'http://yoursite.com/api_json_handler.sql',
  'method', 'POST',
  'body', $json_data,
  'headers', json_object('Content-Type', 'application/json')
));

-- Display the result from the second handler (optional)
SELECT 'alert' AS component, 'Data sent to next step!' AS title, $result AS description;

[setop]

The script works like a charm. Thanks !