は、私はそう私はちょうどjQueryのに新しいコードをコピーしていてくださいページ

Question

をリロードせずにPHPのページに複数のデータを送信する完全に作業する

<?php 
if (isset($_POST['name'])) { 
    echo '<h1>'.$_POST['name']; 
} 
?> 

そのけど今私はこのような複数の入力フィールドを持っています：

<input type="text" id="name" > 
<input type="text" id="job"> 

しかし、私はどのようにthのjQueryコードを実行するのか分からないe 2の入力フィールドに入力し、phpページにそれらを転送することができます。助けが必要です

Answer 1

dataこのようなajaxリクエストのパラメータを使用して複数の値を渡すことができます。

$.ajax({ 
    method: "POST", 
    url: "action.php", 
    data: { 
     name: $('#name').val(), 
     job: $('#job').val() 
    }, 
    success: function(status) { 
     $('#result').append(status); 

     $('#name, #job').val(''); // Reset value of both fields 
    } 
}); 

Answer 2

htmlとJSでいくつか追加してコードを変更する必要があります。 formタグに入力をラップします。サブミット時にpreventDefaultを追加します。 使用jQueryの.serialize()方法 とevent.preventDefault()

• event.preventDefault()：このメソッドが呼び出された場合、イベントのデフォルト アクションがトリガされません。 （ページ のリロード/リダイレクトを防止します）。

• .serialize()：フォーム要素のセットを
  submissionの文字列としてエンコードします。

シリアライズされた文字列出力を分離&とkey=value一対のようになります。 ：

name=john&job=developer.....

HTML

<form id="myform"> 
    <input type="text" id="name" placeholder="Type here and press submit"> 
    <input type="text" id="job" placeholder="Type here and press submit"> 
    <input type="submit" name="submit" value="Submit Form"> 
</form> 

JS

$(document).ready(function() { 
     $('#myform').submit(function(event) { 
      event.preventDefault(); 
       var serialized = $('#myform').serialize(); 
       $.ajax({ 
        method: "POST", 
        url: "action.php", 
        data: serialized, 
        success: function(status) { 
         $('#result').append(status); 
         $('#myform').reset(); 
        } 
       }); 
     }); 
    });