Question

我制作了一个简单的页面，其中包含几个单选按钮和一个文本字段作为练习：

<html>
   ...

    Student list: <input type="radio"   name="list" value="students">
    Lession list: <input type="radio"   name="list" value="lessons">

    <h2>Type the course code:</h2> 

    Code: <input type="text" name="code" id="code">
   <input type="submit" id="submit">
</html>

我通过Javascript添加了一个监听器。

现在通过Javascript我收集各种输入字段中的数据，并将它们打包在一个请求中：

function prepareRequest(req) {
    var radios = document.getElementsByName("list");
    var value;
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {            
            value = radios[i].value;
        }
    }
    var code = document.getElementById("code").value;
    var url = "../AjaxServlet?value="+value+"&code="+code;
    req.open("GET", url, true);
    req.send();
}

我通过Javascript调用我的servlet，获取我的数据，然后处理响应。

如果我想用“纯”HTML做这个，我会将这些输入包含在FORM标记中，如下所示：

<form action="../AjaxServlet" method="get">
    ...
   <input type="submit" id="submit">
</form>

现在当我点击提交时，servlet被称为“通过”表单，它会自动发送它收集的所有数据。当然这是同步的，页面必须重新加载/重定向。

我想知道的是，使用AJAX，是否需要表单标签？我做的看起来很直观，从DOM获取输入元素，提取数据然后手动将它们打包在请求中。这是对还是错？是否有标准或更好的方法来做到这一点？

Answer 1

这个答案假设jQuery使用（你的问题不是，kudos）。

使用form标记的一个好处是表单的序列化。允许更清晰的方法将表单数据传递到您的处理页面。

表格验证也更清洁（IMO）。显然，有很多方法可以验证表单输入，但是您可以轻松地传递表单对象并搜索具有有效值的必需元素。

改编自Learn {jQuery.com上的Ajax and Forms。

虽然我同意celerno做你需要做的事情，但要保持最低限度。

Answer 2

如果您使用表单标签，那么您当前的网页将更改为表单标签页面

示例

in blabla.html
    <form action=/api/send_hi method="POST"> 
        <button name="ID" value="hi">
    </form>

单击按钮，则当前网页将为blabla / api / send_hi.html，结果为 {ID：'hi'}

如果您使用ajax，则您当前的网页将不会更改为表单标签页

in blabla.html
    blabla ~~~
    <script type="text/javascript">
        function hi(){
            $.ajax({
                     url: '/api/send_hi',
                     method: 'POST',
                     dataType: 'JSON',
                     data: {'ID': 'hi'},
                     async: false
             }).done(function(data)){ // do if ajax communication success}
    </script>
    <body>
          <button onclick=hi()>
    </body>

此结果与表单标签结果相同，但当前网页未更改仍然blabla.html不是/api/send_hi.html

表单标记和AJAX请求

2 个答案: