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">

  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

第一名

request.is_ajax是一个函数

第二名

'estimation' in request.POST 您的声明中有它，但您没有将其传递给查看。将其添加到语句data或从语句中删除

Answer 3

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