javascript - 使用 AJAX 从表单发送所有数据

Question

我在使用 Bootstrap 创建的联系表单时遇到了问题。我需要创建提交按钮，尝试使用 AJAX 发送此表单中的所有数据，但我必须在没有任何 javascript 框架或库的情况下执行此操作(这是我的学校作业，所以是的，我真的不能使用它们...) .

我不知道如何在没有 jQuery 的情况下执行此操作，因此将不胜感激任何帮助。

<div class="container">
   <form class="form-horizontal" role="form">
<div class="form-group">
   <label class="control-label col-sm-2" for="usr">Name:</label>
   <div class="col-sm-10">
        <input type="text" class="form-control" id="usr" placeholder="Enter name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+"  title="firstname lastname">
   </div>
</div>

<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
  <div class="col-sm-10">
       <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
  </div>
</div>

<div class="form-group">
<label for="comment">Message:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

<div class="form-group"> 
  <div class="col-sm-offset-2 col-sm-2 pull-right">
     <button type="submit" class="btn btn-primary">Send</button>
  </div>
</div>

Answer 1

将 id 添加到您的表单:

<form class="form-horizontal" role="form" id="idadd">

并使用:

    $('#idadd').bind("submit", function() {
            $.ajax({
                type        : "POST",
                cache   : false,
                url     : "toto.php",
                data        : $(this).serializeArray(),
                success: function(msg){
            // code
                }
                }
        });
        return false;
    });