Django:无法触发 AJAX 调用并将值发送回我的表单

我需要运行 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 标签没有更新。知道我缺少什么吗?


慕后森
浏览 122回答 3
3回答

宝慕林4294392

将名称更改为 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>

一只萌萌小番薯

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

牧羊人nacy

看来问题来自于我没有在 html 代码中声明按钮的类型。默认值(即“提交”)阻止它根据需要触发我的 AJAX 代码。所以最后我不得不将其设置为“type =“button””才能使其正常工作。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5