フォームは、ajax、php、およびjqueryを使用してアクションまたは動作しません。

Question

jquery/ajax newbieからの基本的な質問。

私は、jqueryとajaxを介してサーバー側のphpファイルにデータを渡すための2つの入力フィールドを持つ単純なフォームを持っています。処理後、「要求が処理されました」などの素敵な返信を送り返す必要があります。

私はウェブとこのフォーラムを検索しましたが、すべての投稿/ウェブページ/チュートリアルで同じように記述されているわけではありません。今、私は豊富な情報の中で少し失われています。

最初の質問：すべてのチュートリアルでは、フォームは.htmlファイル（index.htmlなど）の内部にあります。私の場合、フォームは.phpファイルにあります。フォームがどのように扱われるかに影響しますか？フォームはHTML構文で書かれているので、.htmlか.phpファイルかどうかは関係ありません。

2番目の質問：いくつかのチュートリアルで

、フォームアクションは、データが送信されるPHPファイルにリンクします。メソッドは通常 "POST"です。 jqueryファイルでは、$ .ajax urlも同じPHPファイルを指しています。

これは正しい方法ですか？

私がそれを設定すると、送信ボタンをクリックすると、ブラウザは常にform-actionのphpファイルに送られ、私が書いたjqueryファイルは実行されません。 そして私はこれがなぜ起こるのかを知りません。

誰かが正しい方向に向けることを願っています。

Answer 1

お持ちの場合：

<?php 
<form action="distant.php" id="myForm"> 
    <input type="text" name="form-element" /> 
    <input type="submit" value="Submit form" /> 
</form> 
<div id="message"></div> 
?> 

をあなたはjQueryの中でこれを行うことができます：

$('form').on('submit',function(e){ 
    e.preventDefault(); // do not try to access distant.php by reloading the page 
    $.ajax({ 
     type  : "POST", 
     url  : $(this).attr('action'), // access distant.php by ajax 
     data  : $(this).serialize(), // get values from the form. In this case, only one element (with name="form-element") 
     success : function(data) { 
      // response from distant.php - could be "request was processed" if you want 
      $("#message").html(data); // display the response in the html 
     } 
    }); 
}); 

しかし、私は、HTMLやPHPを混合することによってポイントが表示されません。

Answer 2

私は、私がこれまで知っているもの、それは.PHP、.htmlのか.jsonのために働く必要があるファイル拡張子のための

1. にお答えします。あなたが宣言したdataTypeのように、ajaxは戻り値を取得します（html またはjson）。

   2. POSTまたはGETを使用できるタイプは、必要なものによって異なります。しかし、あなたの問題（ajaxは実行できません）のためには、必ず のinspect要素を開いてajaxの送信データをチェックしなければなりません。（ブラウザでは をクリックしてください。次に、[ネットワーク]タブ をクリックします。エラーがあればそこに見ることができます。 （常に あなたのデータコードのコードをdie（$ query）でデバッグするなど）。 Goodluck！

Answer 3

ファイルタイプがphp、html、aspxなどであるかどうかは関係ありません。ブラウザに送信される出力は、すべてクライアントによって同じように扱われます。

あなたの質問は、バックエンドにデータを投稿する2つの異なる方法を参照しています。あなたはその2つをミックスしてマッチングしています。

シンプル：

<form action="/somepage.php" method="post"></form> 

は、クライアントからサーバにデータをポストするための最も標準的な方法です。それはおそらくあなたが学ぶための良い出発点です。 AJAXも同じことを行いますが、ロードされたページのURLを変更することなく、現在のページをロードして非同期的にサーバーにデータを送信することはありません。後者のシナリオでは、通常、DOMを操作するか、データが送信されたことを示すためにユーザーにフィードバックを表示します。

私が前に言ったように、あなたはバックエンドと作業ページに標準的な形式の投稿から始めるべきだと思います。これは、クライアントとサーバー側のやりとりを学ぶためにはるかに優れた点です。