如何通过 Ajax 和 php 发送表单？答案

【问题标题】：How can I send a form via Ajax and php?如何通过 Ajax 和 php 发送表单？
【发布时间】：2016-09-30 23:07:04
【问题描述】：

我想通过 Ajax 提交一些数据：

index.php:

<form>
  <input name="name" value="Frank"><br>
  <input name="submit" type="submit" value="Submit">
</form>

<div id="result"></div>

<script>
$(document).on('submit','form',function(e){
    e.preventDefault();
    $form = $(this);
    submit($form);  
});

function submit($form){
    var formdata = new FormData($form[0]); 
    var request = new XMLHttpRequest(); 
    request.open("post", "action.php");
    request.send(formdata);
    $.ajax({url: "action.php", success: function(result){
        $("#result").html(result);
    }});
}
</script>

action.php:

echo "hello ";
echo $_POST["name"];

我的结果：

hello

我的预期结果：

hello Frank

【问题讨论】：

$form[0] 的内容是你所期望的吗？
@Henders 表单的内容
你为什么要做 xmlhttprequest 和 .ajax？选择其中之一，而不是两者都选。您正在那里进行 TWO ajax 调用。在 .ajax 版本上，您将向服务器发送空白正文。对于 xmltttprequest，您根本不需要处理响应。你打了一个电话然后忘记它的存在。
@MarcB 哦，好的，我会检查一下，非常感谢！
Sending data via AJAX的可能重复

标签： php ajax

【解决方案1】：

如果您想使用 FormData API，那么您需要这样做：

<script>
 var formdata= document.querySelector("form");
 var data = new FormData(formdata);
 $.ajax({url: "action.php",data:data, success: function(result){
    $("#result").html(result);
}});

</script>

【讨论】：

【解决方案2】：

由于您将 jquery ajax 与普通 ajax 混合使用，因此您会出错。坚持使用 jquery ajax。

HTML 表单并为您的输入提供一个 id：

<form>
  <input name="name" id="name" value="Frank"><br>
  <input name="submit" type="submit" value="Submit">
</form>



 $(function() {
         $(".submit").click(function(e) {
         e.preventDefault();
         var name = $("#name").val();
         var dataString = 'name='+ name;    
        if(name==''){
           alert('Name is blank');
           $("#name").focus();
        } else {
           $.ajax({
              type: "POST",
               url: "action.php",
              data: dataString,
           success: function(data){
               $("#result").html(data);
          }
         });
       }
       return false;
      });
    });

【讨论】：

【解决方案3】：

使用 jQuery：

function submit($form){
    $.ajax('action.php', {
        method: 'POST',
        data: $form.serialize(),
        success: function(result) {
            $('#result').html(result);
        }
    });
}

【讨论】：

工作得很好！非常感谢！