使用AJAX直接发送html5 textarea，无需html <form>答案

【问题标题】：Use AJAX to send html5 textarea directly without html <form>使用AJAX直接发送html5 textarea，无需html <form>
【发布时间】：2014-02-27 15:27:43
【问题描述】：

最近我很困惑是否可以直接发送输入/文本区域数据而不包含在 html <form> 中。我想在网页中，如果我们想从用户那里获取信息然后将文本发送到身份验证服务器，我们必须使用<form>，而不管它是通过哪种方式提交的。

但我的论文的一位匿名审稿人声称，<html> 可以通过使用 html5 标签“textarea”和 JS AJAX 帖子来绕过。虽然我做了很多实验试图实现他的方式，但都失败了。

不知道有没有办法不用<form>标签就可以提交用户信息？

谢谢

感谢大家的回复。

更新：我按照“the_void”的代码，将 AJAX 的 url 更改为 ServerSocket（由 Java 实现）。服务器能够获取 POST 事件，但它无法读取 AJAX 的“数据”。以下是html代码：

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#submit').click(function() {
        // information to be sent to the server
      
        info = $('#foo').val();
        $.ajax({
          type: 'POST',
          url: 'http://10.0.0.3:8888',
          data: ({ foo: info }),
          // crossDomain: true,
          // dataType: 'json'
        });
        
        return false;
      });
    });
  </script>
</head>
<body>
  <label>Text</label>
  <textarea id="foo"></textarea>

  <button id="submit">Submit via Ajax</button>
</body>
</html>

socket server 好像不能从 AJAX 读取（但是可以从

【问题讨论】：

是的，使用正确的 javascript，您可以提交任何不带 <form> 标记的内容。您还可以在 URL 中提交带有$_GET 的表单。见：api.jquery.com/jquery.post
技术上这是可能的——为什么不呢？您可以使用 Javascript 发出大多数（不是全部，但这里没有什么感兴趣的）HTTP 请求，并且您可以访问 textarea 的内容。所以是的，那行得通。问题是：带有表单标签的 rpbolem 是什么？从语义上讲，将它放在那里很有意义：毕竟，用户正在填写表格......
这应该让你更接近：stackoverflow.com/questions/13103191/…
没有表单标签的提交信息的方法有很多，ajax只是其中之一。

标签： javascript jquery ajax html

【解决方案1】：

Ajax (Asynchronous Javascript & XML) 是一种将数据从客户端异步发送到服务器的方法。为此，您必须编写代码以使用 Javascript/HTML 在客户端发送数据，并且还必须在服务器端使用服务器端语言（例如 PHP）处理接收到的数据。

而且，是的，您不需要<form> 标记来执行此操作。

看看这个例子。

HTML：

<label>Text</label>
<textarea id="foo"></textarea>

<button id="submit">Submit via Ajax</button>

Javascript：

$('#submit').click(function(e) {
    e.preventDefault();

    // information to be sent to the server
    var info = $('#foo').val();

    $.ajax({
        type: "POST",
        url: 'server.php',
        data: {foo: info}
    });
});

服务器端处理程序 (PHP)： server.php

<?php 

// information received from the client
$recievedInfo = $_POST['foo'];

// do something with this information

请参阅此内容以供参考http://api.jquery.com/jquery.ajax/

【讨论】：

【解决方案2】：

是的，您可以将数据提交到服务器，而无需将其放入form。表单提供了一种更简单的机制，可以将大量数据发送到服务器，而无需开发人员告诉浏览器如何对表单进行编码。

EG：

HTML

var text = $("input[type='text']").val();
$.post("/my/server/url", { userInput : text }, function(data){ /* Success! */});

从技术上讲，这会在没有表单的情况下将数据发布到服务器。

【讨论】：

【解决方案3】：

也许您的审阅者指的是 HTML5 textarea 属性“form”。它允许文本区域成为指定表单的一部分，而不在表单元素内。 http://www.w3schools.com/tags/att_textarea_form.asp

但一般来说，只要你能识别一个元素，比如说一个textarea，你就可以访问其中的文本并将其发送到服务器，而无需使用ajax提交任何表单。来自 Sable 的评论：
http://api.jquery.com/jquery.post 要么 http://api.jquery.com/jquery.ajax/

【讨论】：