提交表单时，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");
   });