Question

我正在尝试在使用 ajax 运行成功方法后向表中添加一个新的输入值，我使用了 ModelForm 。我想将新条目添加到表格正文行！，我试了很多，但我还是不明白！我非常感谢您的帮助

class MainGroup(models.Model):
    admin = models.ForeignKey(User,on_delete=models.CASCADE)
    main_type = models.CharField(max_length=40,unique=True)
    date = models.DateTimeField(auto_now_add=True)

我的views.py

@login_required
def create_maingroup(request):
    lists = MainGroup.objects.all().order_by('-pk')
    form = MainGroupForm()
    if request.is_ajax() and request.method == 'POST':
        form = MainGroupForm(request.POST)
        if form.is_valid():
           obj = form.save(commit=False)
           obj.admin = request.user
           obj.save()
           return JsonResponse({'success':'success'})
        else:
           return JsonResponse({'sucess':False,'error_msg':form.errors,'error_code':'invalid'})
    context = {
       'form':form,'lists':lists 
     }
return render(request,'products/create_maingroup.html',context)

    const form = document.getElementById('main_form')
    form.addEventListener("submit",submitHandler);

    function submitHandler(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '{% url 'products:create-maingroup' %}',
            data : $('#main_form').serialize(),
            dataType: 'json', 
            success: successFunction,
        });
    }
    function successFunction(data) {
        console.log(data.success=='success')
        if (data.success=='success') {

            form.reset();    
            obj = $('#main_form').serialize();
            //i have to append new entred values here 
            //but i dont know how to get inputs and set the admin
            //name who created the post !
            alertify.success("added")  
        }
        else if(data.error_code=='invalid'){
            for(var key in data.error_msg){
                if(key == 'main_type'){
                    document.getElementById('main_error').removeAttribute('hidden')
                    document.getElementById('main_error').innerHTML = data.error_msg[key][0]

                }
            }
        }
      }

我的 html 页面

<div class="col-md-12">
    <div class="card card-info">
      <div class="card-header">
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-toggle="collapse" data-target="#main_form" aria-expanded="false" aria-controls="main_form">
              <i class="fas fa-minus"></i>
            </button>
        </div>
        <h3 class="text-center">add new data</h3>

      </div>

      <!-- /.card-header -->
      <!-- form start -->
      <form id="main_form" role="form" method="POST">{% csrf_token %}
        <div class="card-body">
            <div class="form-group row">
                <label for="mainGroup" class="col-sm-2 control-label">name</label>
                <div class="col-sm-10">
                  {{form.main_type | attr:'id:mainGroup'}}
                  <p id="main_error" class="alert alert-danger" aria-disabled="true" hidden></p>
                </div>
              </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-success">add</button>
          </div>
      </form>
      
    </div>
  </div>

  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="text-center">list of names</h3>
      </div>
      <div class="card-body table-responsive">
        <table id="maingroupid" class="table table-bordered table-striped text-center">
        <thead>              
          <tr>
            <th>#</th>
            <th>admin</th>
            <th>name</th>
            <th>date</th>
            <th>actions</th>

          </tr>
          </thead>
          <tbody id="tableData">
          
          {% for i in lists %}
            <tr>
              <td>{{forloop.counter}}</td>
              <td>{{i.admin}}</td>
              <td>{{i.main_type}}</td>
              <td>{{i.date | date:'d-m-Y h:i A'}}</td>
              <td align="center"> 
                <button class="btn btn-info bg-info" onclick="editMain({{i.id}})" data-toggle="modal" data-target="#myModal"><i class="far fa-edit"></i></button>
                <button class="btn btn-danger bg-danger" onclick="deleteMain({{i.id}})"><i class="far fa-trash"></i></button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

是否可以不刷新页面并显示新数据？我非常需要它

Answer 1

您可以在编辑后返回新表格

context = {} # whatever your context is
return render(request, 'path/to/table/template.html', context=context)

template.html 是模板的表格元素

<thead>              
      <tr>
        <th>#</th>
        <th>admin</th>
        <th>name</th>
        <th>date</th>
        <th>actions</th>

      </tr>
      </thead>
      <tbody id="tableData">
      
      {% for i in lists %}
        <tr>
          <td>{{forloop.counter}}</td>
          <td>{{i.admin}}</td>
          <td>{{i.main_type}}</td>
          <td>{{i.date | date:'d-m-Y h:i A'}}</td>
          <td align="center"> 
            <button class="btn btn-info bg-info" onclick="editMain({{i.id}})" data-toggle="modal" data-target="#myModal"><i class="far fa-edit"></i></button>
            <button class="btn btn-danger bg-danger" onclick="deleteMain({{i.id}})"><i class="far fa-trash"></i></button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      </tfoot>

然后在 ajax 使用中成功

success: function (data, status) {
     $('#maingroupid`).html(data);
 }

ajax成功后异步重新加载页面

1 个答案: