# Sending POST data to a Django view via AJAX to a REST endpoint

If you want to send some POST data to an endpoint URL using AJAX, say for example, adding employee data to the database via a popup and not via the regular `<form>` method, we need to extract the `csrf_token` value from the generated input tag.

Template (for eg. add-employee.html) :

`{% csrf_token %}`

We need to extract the value of the input element that Django generates like this in HTML :

```xml
<input type="hidden" name="csrfmiddlewaretoken" value="ktzIX6zdGAhusuPOK5bSHbzfabByXi0q8wu7YfkTX46vFvA5IQvrb9GXUZVqJVEx">
```

We'll use JavaScript to extract it :

```javascript
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
```

These are documented [here in Django 4.2](https://docs.djangoproject.com/en/4.2/howto/csrf/) and [here in Django 4.0](https://docs.djangoproject.com/en/4.0/ref/csrf/#ajax).

When sending the data in JavaScript via `fetch` or using a library like `axios`, you need to send in the `'X-CSRFToken'` header with the `csrftoken` value (which we extracted just now above)

This becomes the JavaScript code which you can temporarily place in the **add-employee.html** file itself for now wrapped in a `<script>` tag.

```javascript
const BASE_URL = '{{ request.scheme }}://{{ request.get_host }}/';
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
let global_data = { name: "John", age: 31, code: "IN414" };

let submitFormData = () =>
{
	const API_URL = BASE_URL + "/api/employee/add";

	const request = new Request(
		API_URL,
		{ headers: { 'X-CSRFToken': csrftoken } }
	);

	return fetch(request, {
			method: 'POST',
			mode: 'same-origin',
			body: JSON.stringify(global_data) })
	.then(response => response.json())
	.then(response =>
		{
			data = response['time']; return data;
		});
}
```

Now in the urls.py file add :

```python
path('api/add', views.api_add, name='api_add'),
```

And in the views.py file :

```python
from django.shortcuts import render, HttpResponse
import json

def api_add(request):

	t1 = datetime.datetime.now()

	print(request.body)

	if request.method == 'POST':
		data = json.loads(request.body)
		print(data)
		json_obj = json.dumps({ "time": str(datetime.datetime.now() - t1), "method": "post" })
	else:
		print("Only POST allowed")
		json_obj = json.dumps({ "time": str(datetime.datetime.now() - t1), "method": "get" })

	
	result = HttpResponse(json_obj, 'application/json', charset='utf-8')

	return result
```

Now if you run `python manage.py runserver` and click on the submit button, you should be able to see a POST XHR request being made in the console of FireFox (Network in Chrome).

> POST http://localhost:8000/api/employee/add