Question

我有这种形式，其中包含2个input元素和1个textarea元素。

文本区域不受限制，可以包含大量内容。我想将该数据发送到后端，然后在数据库中进行处理和写入。我怎么能做到这一点？

这是我到目前为止的代码

<script type="text/javascript">
    var form = document.getElementById('blogs_form');

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      var quote = document.getElementById("blog_title").value;
      var author = document.getElementById("author").value;
      var text = document.getElementById("text").value;
      var data = "blog_title=" + quote + "&author=" + author + "&text=" + text;
      console.log(data)

      var xhr = new XMLHttpRequest();
      var url = "http://localhost/backend/blogs.php?" + data;
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "none");
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = xhr.responseText;
          if(response !== 'success') {
            Swal.fire({
              type: 'error',
              text: response,
            })
          } else {
            Swal.fire({
              type: 'success',
              text: 'Blog recorded in database',
            })
          }
        }
      };
      xhr.send();
    })
  </script>

我通过使用方法XMLHttpRequest()创建POST来发送它，如上面的代码所示。

问题是当我写大约8000个字符时，它中断了，并且得到了414的响应。这意味着URI太长。

有什么方法可以发送尽可能多的数据吗？永远只是文本数据。

也。可能是服务器端的问题吗？它有某种限制吗？如果可以的话，有办法避免这种情况吗？

Answer 1

您正在使用POST方法，但仍将长文本作为参数附加到URL。要将文本添加到POST负载中：

1）不要将text附加到data：

var data = "blog_title=" + quote + "&author=" + author;

2）代替xhr.send();，请执行以下操作：

xhr.send(text);

Answer 2

您完全不应该像这样手动构建发布数据。用户输入&或#之类的特殊字符后，您的数据将被破坏。我建议使用像jQuery这样的库来为您处理所有这些工作，但是如果您坚持使用纯Javascript，则应该可以执行以下操作：

<script>
var form = document.getElementById('blogs_form');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  // here is where we serialize all the data from the form automatically
  var data = new FormData(this);
  var xhr = new XMLHttpRequest();
  var url = "http://localhost/backend/blogs.php";
  xhr.open("POST", url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = xhr.responseText;
      if(response !== 'success') {
        Swal.fire({
          type: 'error',
          text: response,
        })
      } else {
        Swal.fire({
          type: 'success',
          text: 'Blog recorded in database',
        })
      }
    }
  };
  // and here it is sent as POST body, not part of URL
  xhr.send(data);
})
</script>

顺便说一句，在jQuery中，它类似于：

<script>
$("#blogs_form").on("submit", function(e) {
    e.preventDefault();
    $.post(
        "http://localhost/backend/blogs.php",
        $(this).serialize(),
        function(data, response, xhr) {
            if (response === "success") {
                Swal.fire({type: 'success', text: 'Blog recorded in database'}),
            } else {
                Swal.fire({type: 'error', text: response})
            }
        }
    );
});
</script>

如何使用JavaScript将很长的文本发送到后端？

2 个答案: