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 标记中，其中 {{estimation}} 是我的变量。

你能告诉我我做错了什么吗？谢谢！

更新：感谢您的回答，情况正在变得更好。我已将views.py 中的“request.is_ajax”替换为“request.is_ajax()”。我已将“id”属性添加到我的输入框中。这帮助我触发 AJAX 调用，而不是在新页面中加载内容。不过还有最后一件事。我仍然无法在跨度标记中显示估计变量的值。我意识到它没有“id”属性，所以我做了以下更改：

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

同样在我的 JS 代码中，我将成功部分的最后一行替换为：

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

基本上我用“估计2”替换了“估计”。

不幸的是，span 标签没有更新。知道我缺少什么吗？

Answer 1

将名称更改为 ID。因为#表示字段的 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">&nbsp; function calculate () {&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '/myApp/templates/homepage/',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SHm2: $('#SHm2').val(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; STm2: $('#STm2').val()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(estimation) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(estimation);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("estimation").innerHTML = estimation;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp;}</script>

Answer 2

第一名request.is_ajax是一个函数第二名'estimation' in request.POST&nbsp;您的声明中有它，但您没有将其传递给查看。将其添加到语句data或从语句中删除

Answer 3

看来问题来自于我没有在 html 代码中声明按钮的类型。默认值（即“提交”）阻止它根据需要触发我的 AJAX 代码。所以最后我不得不将其设置为“type =“button””才能使其正常工作。