LoginSignup
1

More than 1 year has passed since last update.

posted at

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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1