form 表单使用ajax提交请求demo

{% extends "bases/base.html" %}
{% block main %}
<div id="page-wrapper" style="padding-top: 160px">

  <form class="form-horizontal" id="node-form">
    {% csrf_token  %}
    <div class="form-group">
    <label for="cpu" class="col-sm-2 control-label">类型</label>
    <div class="col-sm-3">
        <select class="form-control" name="type">
            <option value="node">node</option>
            <option value="alb2">alb2</option>
        </select>
    </div>
  </div>

...
    <div class="form-group ">
        <label for="just zhanwei" class="col-sm-2 control-label"></label>
        <div class="col-sm-3">
            // 在使用ajax 的情况下 type 必须是 button 类型，如果是submit 会造成两次提交（submit+ajax）
            // 导致jango报错： ConnectionResetError: [Errno 54] Connection reset by peer
            <button type="button" class="btn btn-primary btn-block " id="add_node" >创&nbsp&nbsp建</button>
        </div>
    </div>

</form>
</div>
    <script>
        $("#add_node").click(function(){
           $.ajax({
               type: 'POST',
               url: '/k8s/node/',
               dataType: 'json',
               data:$("#node-form").serialize(),
               success: function (res) {
               // 弹窗内容， 样式
                window.wxc.xcConfirm(res["msg"], window.wxc.xcConfirm.typeEnum.success);
               // window.location.reload();
               },
               error:function(response){
                window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error,response['data']);
               }
           })
         })
    </script>
{% endblock  %}