djangoのajaxはフォームを送信しても機能しません

Question

フォームを送信し、結果divを更新したいと思います。 問題は次のとおりです。 1.警告が機能しない 2.ページが result に変更されています。問題はどこですか？

def run_tool(request,tool_id): 
    return HttpResponse("hello_boss") 

JSのようである：

$('#btn_excute').click(function(){ 
     var frm = document.getElementById("tool_form"); 
     var fdata=frm.submit(function(e){ 
      alert("in"); 
      $.ajax({ 
       type:frm.attr('method'), 
       url:frm.attr('action'), 
       date:frm.serialize(), 
       success:function(data){ 
        var rlst= document.getElementById("run_result"); 
        rlst.html(data); 
       }, 
       failure:function(data){ 
        alert("unknown error"); 
       } 
      }); 
      alert("done"); 
      }); 
     return false; 
     }); 

テンプレート：

{% block body_block %} 
<h2>{{ tool.name }}</h2> 

{% if tool %} 
<form id= "tool_form" method ="post" onSubmit="return false;" action="{%url 'run_tool' tool.id%}"> 
    {% csrf_token %} 
    <div class="search"> 
     <div style="margin-right: 20px;"> 
      <label style="line-height: 28px;">server：</label> 
      <select id="server_ip" name="server_ip" class="tfl-dkselect"> 
      {%for server in servers%} 
      <option value="{{server.ip}}">{{server.ip}}</option> 
      {%endfor%} 
      </select>    
     </div> 
    </div> 
     <div class="panel panel-primary"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">param</h3>  
     </div> 
    {% if toolParams %} 
      {% for toolParam in toolParams %} 
      <div class="input-group"> 
       <span class="input-group-addon" id="sizing-addon1" style="WIDTH: 200px;">{{ toolParam.summary }}</span> 
       <span class="input-group-addon" aria-describedby="sizing-addon1" id="{{toolParam.key}}_label"> {{toolParam.key}}&nbsp;=&nbsp;</span> 
       <input type="text" class="form-control" name="{{toolParam.key}}" value="{{toolParam.deftvalue}}"/> 
      </div> 
      {% endfor %} 
    {% else %} 
      <div class="input-group"> 
       <span class="input-group-addon" id="sizing-addon1" style="width: 20%;">No Param</span> 
       <span class="input-group-addon" aria-describedby="sizing-addon1"> Param&nbsp;=&nbsp;</span> 
       <input type="text" class="form-control" placeholder="no need"/> 
      </div> 
    {% endif %} 
    </div>  
    </form> 
    <!-- <textarea class="form-control" rows="{{result_line}}">{{result}}</textarea> -->  
    <!-- Split button --> 
    <div class="btn-group">  
     <button type="button" class="btn btn-primary" data-form=tool_form id="btn_excute">excute</button> 
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <span class="caret"></span> 
     <span class="sr-only">Toggle Dropdown</span> 
     </button> 
     <ul class="dropdown-menu"> 
     <li><a href="{% url 'index'%}">excute</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="{% url 'edit_tool' tool.id%}">edit</a></li> 
     </ul> 
    </div> 
    <!-- 4:3 aspect ratio --> 
    <div> 
    <span id="run_result">sdd</span> 
    </div> 

{% else %} 
      The tool does not exist! 
{% endif %} 

{％の末端ブロック％}

Answer 1

利用するここ

は単純なビューでありますjqueryで専用の方法の;

// code will activated when you try to submit the form which has id tool_form 
$(document).on('submit','#tool_form',function(e){ 
    // will prevent to redirect the page 
    e.preventDefault(); 
    // frm is the object variable which will hold the current form which is submitting 
    var frm = $(this); 
    $.ajax({ 
     // $(frm) is the object which is submitting 
     method:$(frm).attr('method'), 
     url:$(frm).attr('action'), 
     data:$(frm).serialize(), 
     success:function(data){ 
       var rlst= $("#run_result"); 
       $(rlst).html(data); 
      }, 
     error:function(data){ 
       alert("unknown error"); 
     } 
     }); 
     alert("done"); 
    });