Why I have redirect/refresh with Ajax

Question

I try use Django with XMLHttpRequest, try submitting without refresh page. But I have error in console email is not defined.

This my form > name, email, address, text

order_create.html

<h2>Create order</h2>
<form method="POST" id="post_form">
    {% csrf_token %}
    {{form.as_p}}
    <button id="button">Submit</button>
</form>

After I try use Javascript with XMLHttpRequest

document.getElementById('post_form').addEventListener('submit', event => {

    event.preventDefault();

    var body = 'name=' + name + "&email=" + email + "&address=" + address + "&text=" + text;


    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/order/', true);
    xhr.send(body); 

    xhr.onload = function() {
        var jsonResp = JSON.parse(this.response);
        if (this.status == 200) {
            alert(jsonResp);
        } else {
            alert('ERROR');
        }
    }

});

urls.py

urlpatterns = [
    url(r'^order/$', views.order_create, name='order_create')
]

views.py

def order_create(request):
    cart = Cart(request)
    if request.method == 'POST':
        form = OrderCreateForm(request.POST)
        response_data = {}
        if form.is_valid():
            order = form.save()
            for item in cart:
                OrderItem.objects.create(
                    order=order,
                    product=item['product'],
                    price=item['price'],
                    quantity=item['quantity']
                )
            cart.clear_session()

        return JsonResponse(json.dumps(response_data), content_type="application/json", safe=False)
    else:
        form = OrderCreateForm()
        return render(request, 'orders/order_create.html', {'cart':cart, 'form':form})

In console have error email is not defined

Answer 1

    <h2>Create order</h2>
     <form method="POST" id="post_form">
        {% csrf_token %}
        {{form.as_p}}
        <button id="button">Submit</button>
     </form>

let form = document.querySelector("form");
form.addEventListener("submit", (event)=>{

   // This will help you to diable the defaut property of the form, And stops refresing on the submit 

   if(event && event.preventDefault){
      event.preventDefault();
   }

   let formData = new FormData(form)

   //This code will iterate data from the input elements from your form
   let postData = {};

   for(let [key, val] of formData.entries()){
    if(val) postData[key] = val;
   }


   postData(event.target.action, postData)
  .then(data => console.log(JSON.stringify(data))) 
  .catch(error => console.error(error));
})

function postData(url = '', data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native Javascript objects 
}