ajax 提交添加元素内容

JS 
  <script type="text/javascript">
            $('.Phone_Interview_Comments').click(function () {
                var uid = $('#uid').val();
                var Phone_Comments=$('#Phone_Comments').val();
                var csrf = $('input[name="csrfmiddlewaretoken"]').val();
                $.ajax({
                    url:'/hrsmith/userinfo',
                    type:'POST',
                    data:{'Phone_Interview_Comments':Phone_Comments,
                        'uid':uid,
                        'csrfmiddlewaretoken': csrf},
                    success:function (data) {
                        data = JSON.parse(data);
                        if (data.status){
                            var p1 = document.createElement('div');
                            p1.classList.add('well');
                            p1.innerText=Phone_Comments;
                            document.getElementById('Phone_jumbotron').appendChild(p1);
                            $('#Phone_Comments').val('');
                        }else {
                            alert('添加失败')
                        }
                    }
                })
            })

    </script>

HTML         
    <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">Comments</label>
                <div class="col-sm-10">
                    <div class="input-group">
                      <input type="text" class="form-control"  id="Phone_Comments" name='Phone_Comments' placeholder="want you say...">
                      <span class="input-group-btn">
                        <button class="btn btn-default Phone_Interview_Comments" type="button">add!</button>
                      </span>
                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->

        <div class="jumbotron" id="Phone_jumbotron" style="word-wrap: break-word ; height: 200px; 1151px;margin-left: 231px; overflow: scroll" >

        {% for comm in user_commonts %}
          <ul class="list-group" id="Phone_Comments_ul">
            {{ comm.HM_name }}<li class="list-group-item">-- {{ comm.comments }}  {{ comm.comments_date }} </li>
          </ul>
        {% endfor %}

        </div>

View  
      Phone_Interview_Comments = request.POST.get('Phone_Interview_Comments')
        uid = request.POST.get('uid')
        print(Phone_Interview_Comments)

        models.PhoneInterviewComments.objects.create(C_Name_id=uid,HM_name='123',comments=Phone_Interview_Comments)
        ret = {"status": 0, 'url': '','HM_name':123,'comments':Phone_Interview_Comments}

        ret['status'] = 1
        return HttpResponse(json.dumps(ret))

---

            <div class="page-header col-md-10">
                {#                <form action="{% url 'connect' server.id %}" method="POST">#}
                {% csrf_token %}
                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" id='cmd' name="cmd" placeholder="CMD ...">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" data-loading-text="Loading..."
                                        autocomplete="off" id="search" name="search">Search</button>
                                <button class="btn btn-danger" type="submit" id="disconnect" name="disconnect">disconnect</button>
                            </span>
                        </div>
                        <ul class="list-group">eg:
                            service status
                            <li class="list-group-item list-group-item-success">systemctl status xxx.service</li>
                            dhcp Log
                            <li class="list-group-item list-group-item-info">tail -100 /var/log/messages | grep "xxx*"
                            </li>
                            View file contents
                            <li class="list-group-item list-group-item-warning">cat /xxx/xx/xx.* | grep xxx</li>
                            Note:
                            <li class="list-group-item list-group-item-danger">For query only, not vim</li>
                        </ul>
                    </div>
                </div>
                {#                </form>#}
            </div>
            <div class="col-md-10" id="content">
               <span class="load "></span>
            </div>   


 <script>
        $('#search').click(function () {
            var $btn = $(this).button('loading');
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();
            var cmd = $('#cmd').val();
            $.ajax({
                url: '{% url 'connect' server.id %}',
                method: "POST",
                data: {
                    'name': 'search',
                    'cmd': cmd,
                    'csrfmiddlewaretoken': csrf
                },
                beforeSend: function () {
                    $('.load').text('loading');
                    $('#cmd').val('');

                },
                success: function (data) {
                    data = JSON.parse(data);
                    var count = data.res.length;
                    var p1 = document.createElement('div');
                    p1.classList.add('well');
                    p1.innerHTML = '<p style="color:red">'+cmd + '</p>';
                    $.each(data.res,function (index,val) {
                        console.log(index,val)
                        p1.innerHTML += '<p>' + val + '</p>'
                    });

                    {#p1.innerHTML = cmd + '<br>' + data.res   ;#}
                    document.getElementById('content').appendChild(p1);

                },
                complete: function () {
                    $('.load').text(' ')
                    $btn.button('reset')

                }
            })
        })


    </script>