jqueryタブでフォームを送信

Question

jqueryとjquery-uiを使い始めました。タブの中にあるフォームを送信しようとして問題が発生しました。いったん私が 'submit'を押すと、ページ自体がリフレッシュされ、タブは消え、URLはタブの関数urlに変更されます。送信ボタンが働いて、希望の結果が得られます。ただし、タブと同じページにはありません。

誰でもページをリフレッシュしないようにする方法はありますか？私の問題の

例：

私は3種類のタブで「index.phpを」と呼ばれるページがあります。タブの1つは「送信フォーム」と呼ばれ、POSTメソッドを使用してフォームがある場合は、フォームを「form.php」から取得しています。 「submit」ボタンを押すと、ページがリフレッシュされ、URLが「www.example.com」から「www.example.com/form.php」に変更され、そこに結果が表示されますが、ページは「plain」ですタブの下ではなく、普通のページであることを意味します。

私は自分自身を正しく説明してくれることを願っています。

ありがとうございます！

EDIT：ここ は私の投稿コードです：

Answer 1

はjQueryのでフォームの送信をキャプチャして、preventDefault();

$(function(){ 
    $('#formID').on('submit', function(e){ 
    e.preventDefault(); 
    var formSrc = $(this).attr('action'); 
    var formMethod = $(this).attr('method'); 
    var formData = $(this).serialize(); 
    $.ajax({ 
     url: formSrc, 
     type: formMethod, 
     data: formData, 
     success: function(data){ 
     //work with returned data from requested file 
     alert(data); 
     } 
    }); 
    }); 
}); 

EDITでそれを停止します。私は私を追加する必要があります

submit()とは対照的にon();を使用することを選択しました。これは、フォームがDOM.readyで利用可能である場合と利用できない場合があるためです。

Answer 2

2番目の質問に答えて：「この情報を同じタブのPHPコードで返すようにすればどうしたらいいですか？」

あなたのPHPスクリプトはJSONのように値を返します： $ row = mysqli_fetch_array（$ result、MYSQLI_ASSOC）;
echo json_encode（$ row）;

$.ajax({ 
     url: 'sc_getData.php?id=' + ID, 
      type:'GET' 
    }) 
    .done(function(myData) { // data = array returned from ajax 
     myData = JSON.parse(myData);  
     for (var i in tFields){ 
      thisSourceField = sFields[i]; 
      thisTargetField = tFields[i]; 
      targetID = '#' + thisTargetField; 
      thisValue = myData[thisSourceField]; 
      $(targetID).val(thisValue); 
      console.log(targetID + ': ' + thisValue); 
     } 
}) 

私はターゲットとソースフィールドの設定アレイをしました - その後JavaScriptが次のような返された値、と望むものは何でも持つことができます。ソースフィールド配列はPHPスクリプトによって返されるフィールド名と一致し、ターゲットフィールド配列は返される値で埋められるフォームフィールドIDと一致します。