Python （Django）使用Ajax在HTML Contenteditable表上编辑db.sqlite3数据库

我正在尝试创建一个内容可编辑的HTML表，该表将在keypress上更新db.sqlite3数据库。该表中不能有输入字段，因为我还要求它能够使用数据表进行筛选和搜索。到目前为止，我设法在enterkeypress上检索输入，但我不知道如何将其直接发布到数据库（可能使用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>

{%csrf\u令牌%}
一些你可以编辑的文本。
A.
B
{表_list%中的数据为%0}
{{data.a}{%csrf_令牌%}
{{data.b}{%csrf_令牌%}
{%endfor%}
document.addEventListener（'keydown'，函数（事件）{
var esc=event.which==27，
nl=event.which==13，
el=event.target，
数据={}；
如果（esc）{
//恢复状态
document.execCommand（'undo'）；
el.blur（）；
}否则如果（nl）{
//拯救
data[el.getAttribute（'data-name'）]=el.innerHTML；
//我们可以发送一个ajax请求来更新字段
$.ajax({
数据：数据，
类型：“职位”
});
日志（JSON.stringify（数据））；
el.blur（）；
event.preventDefault（）；
}
}，对）；
功能日志{
document.getElementById（'debug'）。innerHTML='值更改为：'+s；
控制台日志；
}
$（文档）.ready（函数（）{
$（'#myTable'）.DataTable（）；
});

---

非常感谢大家的帮助。

是的，关于使用AJAX您是对的。您需要修改的一些内容：

1。您的HTML/JS

      $.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
        } 
      });

2。视图

您需要更改视图以返回，而不是使用创建HTML响应的

render

。请注意，JsonResponse将是上述AJAX处理程序中接收到的确切响应

---

希望这能有所帮助。

谢谢你的帮助，你能帮我理解一下语法吗这是我几天来一直困扰的地方，因为我找到的所有教程都是关于使用JSON文件的，我不知道在ajax函数和视图中都要写些什么。我对python相当陌生。再次感谢，这取决于你想要实现什么——我不确定我是否完全理解你的目标。本质上，您想要做的是，在视图中，将

响应

字典传递给

JsonResponse（）

。类似于您的

上下文

：请记住，您希望返回JSON响应，因此必须将数据传递给

JsonResponse（）

函数才能返回JSON响应。有关更多详细信息，我建议在线查看—我为不清楚表示歉意，我的目标是直接将更新响应发送到我的“db.sqlite3”数据库，而不是发送到“JSON文件”。换句话说，每当我编辑HTML表的内容并按enter键时，它都会立即更新我的数据库，再次感谢您的帮助。不用担心，无论如何，您仍然需要返回JSON响应。请记住，JSON响应并不等同于JSON文件。您可以在视图中进行更新，就像在使用ModelForms的任何其他视图中一样——如果这让您望而却步，我建议您看看Django的文档。基本上，与普通视图中的操作相同，但将最后一行更改为

return JsonResponse（response）

，其中response是包含您的响应的字典。这将被传递到AJAX处理程序中的

success

函数，在那里您可以使用收到的数据更新表。我明白了，我来看看，谢谢大家的提示。谢谢。我想投票支持你的答案，但不幸的是，我的声誉还不够。