python - View.py 不会得到 ajax 但我可以通过直接在 URL 中传递 JSON 来更新数据库，Django

Question

我正在关注本教程https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

我正在尝试使用 CreateCrudUser 类更新我的数据库，但是当我单击提交时，数据会转到 url 的末尾并且它不会更新数据库。如果我在它放在 url 中的 JSON 前面添加单词“create”，它将更新数据库。

视图.py

class CrudView(ListView):
    model = models.CrudUser
    template_name = 'newsfeed/crud.html'
    context_object_name = 'users'

class CreateCrudUser(View):
    def get(self, request):
        name1 = request.GET.get('name', None)
        address1 = request.GET.get('address', None)
        age1 = request.GET.get('age', None)

        obj = models.CrudUser.objects.create(
            name = name1,
            address = address1,
            age = age1
        )

        user = {'id':obj.id,'name':obj.name,'address':obj.address,'age':obj.age}

        data = {
            'user': user
        }
        return JsonResponse(data)

网址.py

from django.urls import path, include
from social_method.apps.newsfeed import views


app_name = "newsfeed"

urlpatterns = [
    #path('observation-feed/', views.ObservationFeed, name='observation-feed'),
    path('', views.ObservationFeed, name='observation-feed'),
    path('observation/<str:pk>/', views.ObservationThread, name='observation'),
    path('new-social-method/<str:pk>/', views.SocialMethod, name='new-social-method'),

    path('crud/',  views.CrudView.as_view(), name='crud_ajax'),
    path('ajax/crud/create/',  views.CreateCrudUser.as_view(), name='crud_ajax_create'),
    ]

模型.py

class CrudUser(models.Model):
    name = models.CharField(max_length=30, blank=True)
    address = models.CharField(max_length=100, blank=True)
    age = models.IntegerField(blank=True, null=True)
    

html

<div class="container">
    <h1>Django Ajax CRUD</h1>
    <h2>{% url "newsfeed:crud_ajax_create" %}</h2>
    <div class="row">
      <div class="col-md-4 ">
        <h3>ADD USER</h3>
        <form id="addUser" action="">
            <div class="form-group">
              <input class="form-control" type="text" name="name" placeholder="Name" required>
            </div>
            <div class="form-group">
              <input class="form-control" type="text" name="address" placeholder="Address" required>
            </div>
            <div class="form-group">
              <input class="form-control" type="number" name="age" min="10" max="100" placeholder="Age" required>
            </div>
            <button class="btn btn-primary form-control" type="submit">SUBMIT</button>
      </form>
      </div>
      <div class="col-md-8">
        <h3>USERS</h3>
        <table id="userTable" class="table table-striped">
          <tr>
            <th>Name</th>
            <th>Address</th>
            <th colspan="3">Age</th>
          </tr>
          {% if users %}
          {% for user in users %}
          <tr id="user-{{user.id}}">
              <td class="userName userData" name="name">{{user.name}}</td>
              <td class="userAddress userData" name="address">{{user.address}}</td>
              <td class="userAge userData" name="age">{{user.age}}</td>
              <td align="center">
                  <button class="btn btn-success form-control" onClick="editUser({{user.id}})" data-toggle="modal" data-target="#myModal")">EDIT</button>
              </td>
              <td align="center">
                  <button class="btn btn-danger form-control" onClick="deleteUser({{user.id}})">DELETE</button>
              </td>
          </tr>
          {% endfor %}
          {% else %}
            No Users
          {% endif %}
        </table>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myModalLabel">Update User</h4>
        </div>
        <form id="updateUser" action="">
        <div class="modal-body">
            <input class="form-control" id="form-id" type="hidden" name="formId"/>
            <label for="name">Name</label>
            <input class="form-control" id="form-name" type="text" name="formName"/>
            <label for="address">Address</label>
            <input class="form-control" id="form-address" type="text" name="formAddress"/>
            <label for="age">Age</label>
            <input class="form-control" id="form-age" type="number" name="formAge" min=10 max=100/>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" >Save changes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}
{% block javascript %}
<script>
// Create Django Ajax Call
$("form#addUser").submit(function() {
    var nameInput = $('input[name="name"]').val().trim();
    var addressInput = $('input[name="address"]').val().trim();
    var ageInput = $('input[name="age"]').val().trim();
    if (nameInput && addressInput && ageInput) {
        // Create Ajax Call
        $.ajax({
            url: '{% url "newsfeed:crud_ajax_create" %}',
            data: {
                'name': nameInput,
                'address': addressInput,
                'age': ageInput
            },
            dataType: 'json',
            success: function (data) {
                if (data.user) {
                  appendToUsrTable(data.user);
                }
            }
      });
      } else {
        alert("All fields must have a valid value.");
    }
    $('form#addUser').trigger("reset");
    return false;
});
function appendToUsrTable(user) {
  $("#userTable > tbody:last-child").append(`
        <tr id="user-${user.id}">
            <td class="userName" name="name">${user.name}</td>
            '<td class="userAddress" name="address">${user.address}</td>
            '<td class="userAge" name="age">${user.age}</td>
            '<td align="center">
                <button class="btn btn-success form-control" onClick="editUser(${user.id})" data-toggle="modal" data-target="#myModal")">EDIT</button>
            </td>
            <td align="center">
                <button class="btn btn-danger form-control" onClick="deleteUser(${user.id})">DELETE</button>
            </td>
        </tr>
    `);
}
</script>

标签： pythondjangoajax