Question

我有一个这样的简单表：

<td> <span class='foo' onclick='insertComment(this)' data-id='1' </span> </td>
<td> <span class='foo' onclick='insertComment(this)' data-id='2' </span> </td>
<td> <span class='foo' onclick='insertComment(this)' data-id='3' </span> </td>

我正在使用类似这个功能的东西通过ajax POST提交数据

function insertComment(div){
    // grab the data-id
    var id =  $(div).data('id');


    // open modal
    $(div).attr("data-toggle", "modal")
    $(div).attr("data-target", "#modal-for-quote-" + type); 


    // get input value from modal
    var input = document.getElementById("username-input").value;


    // check if submit btn on modal is clicked

    var btn = document.querySelector('.submit-btn'); 
    btn.onclick = function(){

    var dataString = 'id=' + id + '&input=' + input; 
    // send ajax post
    jQuery.ajax({
        type: "POST", 
        url:  "http://example.com/ajax.php", 
        data: dataString,
        success: function(response){

        }
    })
  }

}

问题是，当我点击行打开一个模态时，我将数据插入到模态中，并将值提交到我的数据库中。这可以按预期工作，但我只有在每次提交后刷新页面。

但是，如果我只是单击三行并插入值，则第二次和第三次单击包含多个值。

以下是我首次提交时dataString包含的内容

// id=1&input=something

第二次点击

// id=1&input=something
// id=2&input=something

点击第三次

// id=1&input=something
// id=2&input=something
// id=3&input=something

所有这些只是一次点击后，js应该一次只发送一个帖子请求，但不知何故，在第一次点击后，似乎所有内容都存储在某个地方

Answer 1

您需要在private List<String[]> listOfRows = new List<String[]>(); ListOfRows.add(stringArray);函数中获取输入的值。您在用户有机会在输入字段中输入任何内容之前设置onclick。我不确定为什么这会导致累积参数，我怀疑它是在你仍然没有显示的代码中。

我还建议使用input data参数的对象而不是字符串。$.ajax。然后jQuery将对其进行正确编码。

function insertComment(div) {
  // grab the data-id
  var id = $(div).data('id');

  // open modal
  $(div).attr("data-toggle", "modal")
  $(div).attr("data-target", "#modal-for-quote-" + type);

  // get input value from modal
  var input = document.getElementById("username-input");

  // check if submit btn on modal is clicked

  var btn = document.querySelector('.submit-btn');
  btn.onclick = function() {
    var dataString = {
      id: id,
      input: input.value
    };
    // send ajax post
    jQuery.ajax({
      type: "POST",
      url: "http://example.com/ajax.php",
      data: dataString,
      success: function(response) {

      }
    })
  }
}

Answer 2

我建议您使用下一个解决方案：

success: function(response){
  window.reload()
}

每次点击后它都会重新加载您的页面为了获得更好的用户体验，请在单击后使按钮处于非活动状态，这有助于减少意外的多次点击和数据发送。希望它有所帮助！

每次操作后，Javascript都不会清除提交的值

2 个答案: