ページを遷移せずにデータ送信

はじめまして。こちらのカテゴリに質問投稿するのは初めてです。
投稿カテゴリが適切かどうかさえも不明ですが、お知恵を拝借したく投稿させて頂きます。

表題の通りですが、SNSなどに多く使われている、コメントを投稿する際、ページを遷移することなくフォームのデータを送信し、そのデータをMySQLに登録するとった流れを考えています。

http://shun-ichiro.com/log/reminder/php-jquery-a …

上記サイトは、フォーム上のデータではなく、ボタンを押した際に決まったデータをDB内に登録する者ですが、データ処理という意味での流れは理想に近く、上記サイトでサンプルとして配布されているものをテストしているのですが、このページ上にテキストフォームなどを加えた場合の処理が、お恥ずかしながら一向に見えてこないのが現状です。

上記ページを例にした場合、テキストフォームを設置し、そのデータをDBに登録するための、post.js はどのようなスクリプトとなるのでしょうか？

PHPはこれまで触ってきましたが、Ajax？Javascript？を触るのは初めてといっていい程で、色々と調べながら今日まで来ましたが、適切なキーワードさえも不明で、欲する情報になかなか辿り受けない状況です。（もうかれこれ1週間以上思考錯誤しています・・汗）

お忙しいなか恐縮ですが、アドバイスのほど宜しくお願い致します。

No.3 ベストアンサー 回答者： taloo 回答日時： 2014/02/13 12:58

>No.2お礼

>今回の質問時、サンプルとして提示させて頂いたのは、index.html、post.js、post.phpの3つのファイルから構成されていますが、今回ご提示頂いたスクリプトは、index.htmlに全て記述し、post.jsは利用しない。という認識で宜しかったでしょうか？

どちらでもいいです。
作りやすい方法で作ってください。


>それと、テキストフォームにnema属性としてsomethingが与えられていますが、このフォームの値はどのようにして取得したら宜しいのでしょうか？

全部jQueryがやってくれます。

PHPの話であれば、通常の<form>送信と同じです。

この回答へのお礼

talooさん

お忙しい中でのご回答をありがとうございます。

PHPのようにサーバ側で処理させることになれてしまうと、感覚的にも「慣れ」が必要ですね。

ありがとうございました。

お礼日時：2014/02/14 00:19

No.2 回答者： taloo 回答日時： 2014/02/12 23:46

失礼しました。

サンプルコードはフォームの内容を送信してるのではなく、引数固定で文字列を渡してますね。


<form action="post.php" id="ajaxpostform">
フォームフィールドを適宜。<input type="text" name="something">
<input type="submit" value="送信">
</form>

<script>
$(function(){

$('#ajaxpostform').submit(function(event){
$.post( this.action, {data: $( this ).serialize()}, function(json){alert("フォームをPOSTしました");});
event.preventDefault();
});

});//$
</script>

この回答へのお礼

talooさん

早速のアドバイスありがとうございます。感謝いたします。

今回の質問時、サンプルとして提示させて頂いたのは、index.html、post.js、post.phpの3つのファイルから構成されていますが、今回ご提示頂いたスクリプトは、index.htmlに全て記述し、post.jsは利用しない。という認識で宜しかったでしょうか？

それと、テキストフォームにnema属性としてsomethingが与えられていますが、このフォームの値はどのようにして取得したら宜しいのでしょうか？

質問ばかりで恐縮ですが、ちゃんと理解したいと思う気持ちからの質問です。引続きアドバイスのほど頂戴出来たら幸いです。

お礼日時：2014/02/13 01:16

No.1 回答者： taloo 回答日時： 2014/02/12 23:06

紹介されている３行が全部です。

おおよそ想像されている長ったらしいJavaScriptコードは、jQueryというライブラリに全て書かれていますので、自分で書く必要はありません。

この回答へのお礼

talooさん

はじめまして。早速の回答をありがとうございます。

>紹介されている３行が全部です

仰っているのは配布されている、post.jsのことかと思いますが、
サンプルはテキストフォームなどは一切なく、テキストフォームを設置した場合の
post.jsの記述法が判らず、質問させて頂きました。

例えば、html上に

<textarea name="sample" cols="20" rows="4"></textarea>
といったフォームを持った時のpost.js側の処理が判らないのです。

アドバイスのほど頂戴出来たら幸いです。

お礼日時：2014/02/12 23:34