Udemy フルスタック・Webエンジニア講座 セクション11.モバイルアプリ

jQueryでデータ送受信できるようにしてみた

Udemyフルスタック・Webエンジニア講座　セクション11.モバイルアプリの単元では、App.jsを使ってモバイルアプリをつくるものでした。しかし、今回私はデータの送受信をjQueryで行ってみることにしました。

post()

データの送受信を行うために、jQueryのpost()というメソッドを使ってみました。

 <form>
<input type="text"  name="send-name" placeholder="名前を入力してください。" value="" />
      <p></p>
<input type="text" placeholder="件名を入力してください。" value="" />
      <p></p>
<textarea placeholder="メッセージを入力して下さい。"></textarea>
      <p></p>
      <input type="submit" value="送信">
</form>

まず、HTMLのbodyの中に上のようなコードを書きました。これにより、名前、件名、メッセージ内容を入力し、それを送信することが出来ます。では、送信の中身をJavascriptのjQueryで書いていきます。

 $.post( 'https://httpbin.org/post',$('form').serialize() )
 //サーバーからの返信を受け取る
 .done( function(data) {
   console.log(data.form);
   alert("送信出来ました");
   })

 //通信エラーの場合
 .fail( function() {
  console.log(通信エラーが発生しました);
   })

postのメソッドは

$.post(サーバーへのパス,任意のデータ)

という構成をしています。今回のサーバーは任意のものを使い、データはformの中身をとってきます。
doneを使うことでサーバーからの返信を受取ることが出来ます。また、通信エラーが発生したときのために、failも使っています。

$('form').submit(function( event ) {
    event.preventDefault();
});

また、console.logを使うため、submitでホームページを更新しないように上のようなコードを書いています。

反省点

今回、任意のサーバーを使ってメールの送受信をおこなえるようにしたが、メールアドレスに送受信できるようには出来ませんでした。今後、これを可能にするためにしていきたいと思います。また、submitのメソッドが起動しないというエラーも発生しました。これは使い方が間違っていたためエラーが出てしまったので、しっかりと復習しようと思います。

最後に

洗練さんでインターンの課題(フルスタック・Webエンジニア講座　セクション11.モバイルアプリ)です。
フルスタック・Webエンジニア講座
本日はメール送受信サイト作りと、ProgateのJavascriptの復習をしました。

最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります！やる気は人一倍です！
https://senren.work/