ajax 提交添加元素内容

JS 
  

HTML         
<div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">Commentslabel>
                <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>
                  div>
                div>

        <div class="jumbotron" id="Phone_jumbotron" style="word-wrap: break-word ; height: 200px;width: 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">Searchbutton>
                                <button class="btn btn-danger" type="submit" id="disconnect" name="disconnect">disconnectbutton>
                            span>
                        div>
                        <ul class="list-group">eg:
                            service status
                            <li class="list-group-item list-group-item-success">systemctl status xxx.serviceli>
                            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 xxxli>
                            Note:
                            <li class="list-group-item list-group-item-danger">For query only, not vimli>
                        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 = '
'+cmd + '';
                    $.each(data.res,function (index,val) {
                        console.log(index,val)
                        p1.innerHTML += '
' + val + ''
                    });

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

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

                }
            })
        })


    script>

 

转载于:https://www.cnblogs.com/polly-ling/p/9481728.html