フォームデータをAJAX経由でPHPファイルに送信

Question

私はすでに数時間試していますが、他に何を試していいのか分かりません。私はここで数十の質問を見たが、彼らは過度に複雑であるか、私はそれらを理解していない。 javascript/jqueryの経験が数日前までに役立つことはありません。

事がある

<?php 
if (isset($_POST['jsondate'])) { 
    echo "whatever"; 
} 

、私はJSONとの警告が出ます：

<form onsubmit="onSubmit(this)"> 
    <input type="text" name="input1"/><br/> 
    <input type="text" name="input2"/><br/> 
</form> 

そして、私のスクリプト：

function onSubmit(form){ 
    var jsondate = JSON.stringify($(form).serializeArray()); 
    console.log(jsondate); 
    alert(jsondate); 
    $.ajax({ 
     type: "POST", 
     url: "json.php", 
     data: jsondate, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(data){ 
      alert(jsondate); 
     }, 
     failure: function(errMsg) { 
      alert(errMsg); 
     } 
    }); 
} 

そして、私のjson.phpファイル とにかく、ここに私のフォームです文字列ですが、json.phpにリダイレクトすると（フォーム上でaction="json.php"を使用）、ページには何も表示されないので、何か内部にあると思います$.ajax({...})

どのように動作させるのか、どのように動作するのか、そしてなぜ本当に役に立つのでしょうか？

Answer 1

あなたはこの例では、私はHTMLでIDを使用するとJavaScript

HTMLでそれを使用して取得します。..要素から値を取得する方法が必要になります。

<form onsubmit="onSubmit(this)"> 
    <input type="text" id="ID1"><br/> 
    <input type="text" id="ID2"><br/> 
</form> 

JavaScript：

var v1 = $("#ID1").val(); // Get de value using the Ids 
var v2 = $("#ID2").val(); 
$.ajax({ 
    method: "POST", 
    url: "json.php", // add the page here 
    data: { name: v1, location: v2 } // put the data here (Will get this data using POST) 
}) 
    .done(function(msg) { 
    alert("Data Saved: " + msg); // if it works this alert will appear 
}); 

Answer 2

2つの問題：フォーム要素に名前を付けず、送信を停止しません。

これは、jQueryの多くを使用するソリューションです。

最初に、便宜上、フォームにIDを付けてください。

第2に、フォームフィールドに名前を付ける必要があります。

<form id="form1"> 
    <input type="text" name="input1"><br/> 
    <input type="text" name="input2"><br/> 
</form> 

第三に、フォームに.submit(handler)を使用してonsubmitイベントハンドラを添付してください。

$('#form1').submit(function (e) { 
    // prevent the form from submitting/reloading (by default) 
    e.preventDefault(); 
    // 
    $.ajax({ 
     type: "POST", 
     url: "json.php", 
     data: $(this).serializeArray(), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(data){ 
      alert(jsondate); 
     }, 
     failure: function(errMsg) { 
      alert(errMsg); 
     } 
    }); 
}); 

第四に、あなたのjson.phpで、あなたはフィールド

echo $_POST['input1']; 
echo $_POST['input2'];