How to Call Controller Method from Javascript

Technical

In Odoo, it’s always a herculean task to connect between different layers of technologies like Python, JavaScript, XML, and Qweb. Here I’m going to describe calling an HTTP controller from Javascript. We do different calls like rpc.query, ajax.jsonRpc, action._rpc etc. But all these calls make a JSON request to where we are calling. But some controllers, especially some from the website module does not allow us to make JSON requests as they only accept HTTP requests. So, here I’m going to make how to call a controller using JavaScript’s XMLHttpRequest class. First, we have to create a new instance of XMLHttpRequest like below

var xhttp = new XMLHttpRequest();

Now, we have to set a call back to the request, I’m binding it with the onreadystatechange event

xhttp.onreadystatechange = function () {
   console.log(this.responseText);
};

Here, I have added a function as a callback to the ready state change event of the XMLHttpRequest object. I have just logged the result to the console because it does not seem too important to me.

Now, let’s get into the main part, here, we are going to set the request method and URL.

xhttp.open("POST", "/subscribe/checkout", true);

Here, we have specified the request method, Since we have some data to submit, We use the POST method here.

As the next parameter, we passed the URL since the control is already inside my odoo website, I have given the relative URL.

The last value may be a little confusing to people who are not familiar with JavaScript, Actually, it’s just a boolean value that indicates whether the request is asynchronous or not.

xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

We have just set the request header to x-www-form-urlencoded.

The next step is to prepare the data. I have retrieved all the data from my form and have stored them in some variables. So, what I’m going to do is, just put them in a JavaScript object, then make it JSON object and send the request.

var data = {};
data.number_of_users = no_o_users;
data.company_name = company_name;data.contact_phone = contact_phone;data.contact_email = contact_email;data.contact_name = contact_name;data.password_password = password_password;data.customer_industry = customer_industry;data.customer_country = customer_country;data.plan_selected = plan_selected;data.checked_ids = checked_ids;data = JSON.stringify(data);xhttp.send(data);