Question

我想通过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

Answer 1

使用jQuery：

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

Answer 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;
      });
    });

Answer 3

如果您想使用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>

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

3 个答案: