AjaxとPHP経由でフォームを送信するにはどうすればよいですか？

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 

私の予想結果：

jQueryのを使用して

hello Frank 

Answer 1

：

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

Answer 2

を使用すると、通常のAJAXとjQueryの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>