通过来自多个客户端的 Ajax PUT 请求发送数据

Question

我编写了一个小应用程序，它通过 ajax GET 从服务器获取数据，并将这些数据加载到 html 表中。 此外，用户可以通过填写表格或通过复选框删除数据来将数据添加到表格中。 然后表中的所有数据都通过 ajax PUT 发送到服务器。 在发送之前，将有一个 get-request 再次从服务器获取最新数据。 到目前为止，一切都很好。

现在我面临的问题是，当网站从多个客户端访问时，第二个 get-request 工作不正常。 发送时未添加数据，它被其他用户的条目/输入覆盖。

有谁知道如何解决这个问题？ 先感谢您！

GET请求

  function getMessage() {
    // Send HTTP Request
      $.ajax({
          type: 'GET',
          url: endpointUrlGet,
          contentType : 'application/json',
          success: function(data) {
              // Loading data from get request into table
                  var filter_data = '';
                  $.each(data, function(index, value) {
                      filter_data += '<tr>';
                      filter_data += '<td><input type="checkbox" /></td>';
                      filter_data += '<td>' + value.nummer+ '</td>';
                      filter_data += '<td>' + value.start+ '</td>';
                      filter_data += '<td>' + value.time+ '</td>';
                      filter_data += '<td>' + value.type+ '</td>';
                      filter_data += '<td>' + value.start_time+ '</td>';
                      filter_data += '<td>' + value.end_time+ '</td>';
                      filter_data += '</tr>';
                  });
                  $("#entries").append(filter_data );
          },
          error: function(d) {
              alert("Fehler beim Laden.")
          }
      })
  }

PUT-请求

function sendMessage(payload) {
      // Send HTTP Request
      $.ajax({
        type: 'PUT',
        url: endpointUrlPut,
        contentType : 'application/json',   
        data : payload,
        statusCode: {
            200: function() {
                location.reload();
                alert("Success.");
            },
            400: function() {
                alert( "Fehler." );
                console.log("Bad request.");
              },
            403: function() {
                alert( "Fehler." );
                console.log("Forbidden.");
                },
            404: function() {
                alert( "Fehler." );
                console.log("Page not found.");
              },
            500: function() {
                alert( "Fehler." );
                console.log("Internal Server error.");
              },
            502: function() {
                alert( "Fehler." );
                console.log("Bad Gateway.");
                },
            503: function() {
                alert( "Fehler." );
                console.log("Service Unavailable.");
                }
          },
          error: function(d) {
              alert("Fehler beim Senden.");
          }
     })       
  }

方法调用：

$('#submit_btn').click(function() {

        getMessage();
        sleep(100);


        $("#entries input[type='checkbox']:checked").closest("tr").remove();    
        var table= $('#entries tr:has(td)').map(function(i, v) {
            var $td =  $('td', this);
                return {
                         nummer: $td.eq(1).text(),
                         start: $td.eq(2).text(),
                         time: $td.eq(3).text(),
                         type: $td.eq(4).text(),
                         start_time: $td.eq(5).text(),
                         end_time: $td.eq(6).text()
                       }
        }).get();

        // Parses the tabledata into required JSON-format
        var data = JSON.stringify({
            "env" : "dev",
            "allData" : table
        })


        // Sending the filters via PUT
        sendMessage(data);

      });
     

Answer 1

我认为它更多的是关于实现而不是你的 Ajax 请求。 您需要同步对资源的访问。

我的意思是，是否允许多个客户端同时访问资源？ 如果允许，更新的依据是什么？ 我觉得不应允许两个客户端同时访问同一资源，否则会导致数据不一致，就像您的情况一样。 您需要应用正确的同步技术来实现所需的 output。 希望这很清楚！