Question

我正在尝试创建一个内容可编辑的HTML表，它将在keypress上更新db.sqlite3数据库。该表中不能包含输入字段，因为我还要求它能够使用数据表进行过滤和搜索。到目前为止，我设法检索输入按键的输入，但我不知道如何将其直接发送到数据库（大概使用AJAX）而不是JSON。任何人都可以为我提供完整的语法样本，我对Django来说是个新手

这是我的代码：

Model.py

class MyModel(models.Model):
    a = models.CharField(max_length=10)
    b = models.CharField(max_length=10)

    def __str__(self):
        return self.a

form.py

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['a', 'b']

view.py

def display_table(request):
    context = {
        "table_list": MyModel.objects.all(),
        "title": "Table_List"
    }
    return render(request, 'tables/display.html', context)

display.html

 <form action="" method="post" id="test_post">{% csrf_token %}
                        <div id="debug" contenteditable data-name="custom-text">Some text you can edit.</div>
                        <table id="myTable" class="display">
                            <thead>
                                <tr>
                                    <th>A</th>
                                    <th>B</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for data in table_list %}
                                    <tr >

                                        <td contenteditable="true" data-name="a_name" id="{{data.id}}">{{data.a}}</td>{% csrf_token %}
                                        <td contenteditable="true" data-name="b_name" >{{data.b}}</td>{% csrf_token %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </form>

<script>

    document.addEventListener('keydown', function (event) {
        var esc = event.which == 27,
          nl = event.which == 13,
          el = event.target,
          data = {};

        if (esc) {
          // restore state
          document.execCommand('undo');
          el.blur();
        } else if (nl) {
          // save
          data[el.getAttribute('data-name')] = el.innerHTML;



          // we could send an ajax request to update the field
          $.ajax({
            data: data,
            type: "POST"
          });


          log(JSON.stringify(data));

          el.blur();
          event.preventDefault();
        }
    }, true);

    function log(s) {
        document.getElementById('debug').innerHTML = 'value changed to: ' + s;
        console.log(s);
    }
</script>

<script>
        $(document).ready(function(){
          $('#myTable').DataTable();
        });
</script>

非常感谢大家的帮助。

Answer 1

是的，您使用AJAX是正确的。您需要修改一些内容：

<强> 1。您的HTML / JS

NodeSelector='<%# TabName %>'

<强> 2。观点

您需要更改视图才能返回JsonResponse，而不是使用$.ajax({ data: data, type: "POST", // include URL url: 'url/to/post/to', // include response handler here success: function(response) { // do whatever you want with response // you can just console.log(response.data) first }, error: function(response) { // error handler to failed AJAX requests } });来创建HTML响应。请注意，JsonResponse将是上面AJAX处理程序中收到的确切响应。

希望这有帮助。

（Django）使用Ajax

1 个答案: