Jquery Ajax Form PluginとPHPを使用してフォームを送信しますか？

このjQueryのフォームのプラグインを使用してフォームを送信する方法で、簡単な例とhtml形式を使用してデータを取り出す HTMLコードJquery Ajax Form PluginとPHPを使用してフォームを送信しますか？

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
// prepare the form when the DOM is ready 
    $(document).ready(function() { 
     // bind form using ajaxForm 
     $('#htmlForm').ajaxForm({ 
      // target identifies the element(s) to update with the server response 
      target: '#htmlExampleTarget', 

      // success identifies the function to invoke when the server response 
      // has been received; here we apply a fade-in effect to the new content 
      success: function() { 
       $('#htmlExampleTarget').fadeIn('slow'); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
<form id="htmlForm" action="post.php" method="post"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form> 
<div id="htmlExampleTarget"></div> 
</body> 
</html>

PHPコード

これはちょうど私がする必要がどのような細かい仕事私が必要な場合はどうすれば知っているフォームフィールドをシリアライズJS関数を介してこのオプションを渡す方法また、私はフォームが処理されている間に読み込みメッセージを表示したいどうすればいいのですか？ thaあなたは

出典

2012-03-20 Marco

機能（）{ $（ "＃htmlExampleTarget"）HTML（ '読み込んでいます...'）; \t \t}、 – Kamal

をserailizeしてPHPページに投稿するには、あなたのページにjQueryだけが必要です。他のプラグインは必要ありません

$("#htmlForm").submit(function(){ 

    var serializedData= $("#htmlForm").serialize(); 
    $.post("post.php", { dat: serializedData},  function(data) { 
     //do whatever with the response here 
    }); 

    });

投稿メッセージを表示する場合は、投稿を開始する前に行うことができます。はあなたがID "divProgress" あなたのページに存在

HTML

<div id="divProgress" style="display:none;"></div>

スクリプト

$(function(){ 
    $("#htmlForm").submit(function(){ 

    $("#divProgress").html("Please wait...").fadeIn(400,function(){ 

     var serializedData= $("#htmlForm").serialize(); 
     $.post("post.php", { dat: serializedData},function(data) { 
      //do whatever with the response here 
      }); 

     });  
    }); 
});

出典

2012-03-20 03:20:34 Shyju

これは私がそれを使用したときにすべて正常に機能しません。通常、フォームにはすべてAjaxがありません。 – Marco

@Marco：フォームidがhtmlFormの場合、動作します。いくつかのエラーが出ていますか？ – Shyju

でdiv要素を持っていると仮定するとShyjuによって掲示答えはうまく動作するはずです。私は 'dat'を引用符で囲むべきだと思います。

$.post("post.php", { 'dat': serializedData},function(data) { 

... 

}

あるいは単に、

$.post("post.php", serializedData, function(data) { 

... 

}

とPHPの$ _POSTを使用してデータにアクセスします。

注：申し訳ありませんが、私はコードをテストしていませんが、動作するはずです。

出典

2012-03-20 05:08:28

Pheryライブラリではこれをバックグラウンドで行います。フォームを作成するだけでフォームに自動的に入力されます。。beforeSend：あなたはこのようにしbeforeSend機能を使用することができますロードメッセージについてhttp://phery-php-ajax.net/

<?php 
    Phery::instance()->set(array(
    'remote-function' => function($data){ 
     return PheryResponse::factory('#htmlExampleTarget')->fadeIn('slow'); 
    } 
))->process(); 
?> 
<?php echo Phery::form_for('remote-function', 'post.php', array('id' => ''); ?> //outputs <form data-remote="remote-function"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form> 
<div id="htmlExampleTarget"></div> 
</body> 
</html>

出典

2012-11-07 05:15:20 pocesar

Jquery Ajax Form PluginとPHPを使用してフォームを送信しますか？

答えて

関連する問題