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

Question

I've wrote a small application which is fetching data from a server via ajax GET and loads this data into an html table. Furthermore the user can add data into the tablerows by filling out a form or remove data via checkbox. Then all data from the table gets send to the server via ajax PUT. Before sending there will be a get-request again to get the latest data from the server. So far so good.

Now I am facing the issue that when the website gets accessed from multipe clients the second get-request works not proper. The data is not add when sending, it's getting overwritten by the entries/input from the other user.

Does anyone ahs an idea how to solve this issue? Thank you in advance!

GET-request

  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-request

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

Method-calls:

$('#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

I think its more about the implementation rather than your Ajax request. You need to synchronize the access to the resource.

What i meant by this comment is, are multiple clients are allowed to access the resource simultaneously? If allowed on what basis the updates are made? What i feel is two clients should not be allowed to access the same resource simultaneously, other wise it would lead to data inconsistency as in your case. You need to apply the right synchronization technique to achieve the desired output. Hope this is clear!