结合使用Ajax和Django来调用后端并显示结果

Question

I am taking user input and sending it to Django backend for some text processing. After performing backend operation I want to display results.

I tried but as I am new with ajax,I am not sure where I am making mistake. Can anyone please give me correct way of using ajax for this operation? I appreciate if you can give link to any good reference document.

Current issue - When I click on submut button it removes input text area.

My html report.html -

{% extends 'base.html' %}
{% block content %}
  <h1>StopWordsRemoval</h1>

<script type='text/javascript'>
$(document).ready(function(){
    $(form).on('submit', function(event){
        $.ajax({
            url: 'stopwordsremoval/(?P<document1>.+)'
            type: 'POST',
            data: this.serialize(),
        }); 
    });
});
</script>

<div>
<form  method = "post" >
    {% csrf_token %}
    {{ form}}

    <button type="submit">stopwordsremoval</button>
    </div>
    </form>
    <div >
        <ul>
            <li>{{ naturallanguageprocessing }}</li> 
        </ul>
    <a href="{% url 'stopwordsremoval' %}" </a>
<style>
    div {
        width: 1000px;
        border: 5px solid green;
        padding: 10px;
        margin: 10px;
    }
</style>
</div>
  </div>

  {% endblock %}

urls.py

from django.conf.urls import url    
from . import views
urlpatterns = [
    url(r'stopwordsremoval/$', views.stopwordsremoval.as_view(), name='stopwordsremoval'),
    url(r'stopwordsremoval/(?P<document1>.+)/$',
        views.ReportDetails.as_view(), name='report_details'),
]

forms.py

from django import forms

class ReportForm(forms.Form):
    #pdb.set_trace()
    text = forms.CharField(widget=forms.Textarea(attrs={'rows': 5, 'cols': 100}))

Answer 1

<script type='text/javascript'>
$(document).ready(function(){
    $(button).on('click', function(event){
        var form = $(form).serialize()
        $.ajax({
            url: 'stopwordsremoval/(?P<document1>.+)' // this will not work
            type: 'POST',
            data: form,
        }); 
    });
});
</script>