Django: невозможно вызвать AJAX вызов и отправить значения обратно в мою форму

Question

Мне нужно выполнить вызов AJAX, чтобы выполнить быстрый расчет в моем представлении django и вернуть результат на моей странице html внутри тега.

Я очень новичок в Javascript, поэтому я не понимаю, почему мой AJAX звонок не сработал. Это мой html и JS код:

<input type="text" name="SHm2" maxlength="10" type="number" value="50">
<input type="text" name="STm2" maxlength="10" type="number" value="50">

<button id="estimation" name= "estimation" onclick="calculate()">Estimation</button>
<span>{{estimation}}</span>

<script type="text/javascript">
  function calculate () {
    $.ajax({
            url: '/myApp/templates/homepage/',
            type: 'POST',
            data: {
              SHm2: $('#SHm2').val(),
              STm2: $('#STm2').val()
            },
            success: function(estimation) {
            alert(estimation);
            document.getElementById("estimation").innerHTML = estimation;

            }
    }); 
}
</script>

А это мой views.py:

def homepage(request):
    if request.method == 'POST' and request.is_ajax and 'estimation' in request.POST:
        SHm2 = request.POST.get('SHm2')
        STm2 = request.POST.get('STm2')
        estimation = float(SHm2) + float(STm2)
        estimation = json.dumps(estimation)
        return HttpResponse(estimation, content_type='application/json')

Проблема в том, что код AJAX не срабатывает, так как я не получаю предупреждение. Тем не менее, код в моем представлении django работает в любом случае (что странно, поскольку я указал для запуска if 'request.is_ ajax', который, похоже, не распознается с другой стороны). Он загружает новую страницу, где правильно отображает результат. Но это не то, что я хочу, так как мне нужно, чтобы результат был в моей форме в теге span, где {{оценка}} - моя переменная.

Не могли бы вы сказать мне, что я делаю неправильно? Спасибо!

ОБНОВЛЕНИЕ: Благодаря вашим ответам становится все лучше. Я заменил в views.py 'request.is_ ajax' на 'request.is_ ajax ()'. Я добавил атрибут 'id' в мои поля ввода. Это помогло мне вызвать вызов AJAX и не загружать вещи на новую страницу. Есть одна последняя вещь, хотя. Я все еще не могу отобразить в своем теге span значение оценочной переменной. Я понял, что у него нет атрибута 'id', поэтому я сделал следующее изменение:

<span id="estimation2">{{estimation}}</span>

Также в своем коде JS я заменил в успешной части последнюю строку на:

document.getElementById("estimation2").innerHTML = estimation;

По сути, я заменил «оценка» на «оценка2».

К сожалению, тег span не обновляется. Есть идеи, что мне не хватает?

Answer 1

Измените имя на id. потому что # означает идентификатор поля. Как от name = "SHm2" до id = "SHm2"

<input type="text" id="SHm2" maxlength="10" type="number" value="50">
<input type="text" id="STm2" maxlength="10" type="number" value="50">

<button id="estimation" name= "estimation" onclick="calculate()">Estimation</button>
<span>{{estimation}}</span>

<script type="text/javascript">
  function calculate () {
    $.ajax({
            url: '/myApp/templates/homepage/',
            type: 'POST',
            data: {
              SHm2: $('#SHm2').val(),
              STm2: $('#STm2').val()
            },
            success: function(estimation) {
            alert(estimation);
            document.getElementById("estimation").innerHTML = estimation;

            }
    }); 
}
</script>

Answer 2

1-й

request.is_ajax - это функция

2-й

'estimation' in request.POST У вас есть это в вашем утверждении, но вы не передали его для просмотра. Добавьте его к data или удалите из оператора

Answer 3

Казалось, что проблема возникла из-за того, что я не объявил тип моей кнопки в своем коде html. Значение по умолчанию (т. Е. «Submit») не позволяло запускать мой код AJAX по мере необходимости. Таким образом, в конце я должен был установить его на type = "button", чтобы он работал.