自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

ajax

  • 【Django】Ajaxを使ってOSMとLeaflet.jsでマーカーを配置させる
    Ajaxを使うことで、ページ全体を再レンダリングしなくてもデータの投稿ができるようになる。これをOSMとLeaflet.jsを使ったマッピングに使うことで、データの投稿がとてもスムーズになる。 Ajaxに関してはDjangoでAjax(jQuery)を実装、送信と同時に投稿内容を確認する【Django Rest Framework不使用版】を、OSMとLeaflet.jsはDjangoでOpenStreetM ...
    続きを読む

  • DjangoでAjax(jQuery)を実装、送信と同時に投稿内容を確認する
    ウェブアプリケーションでAjaxが使えるようになれば、ページ内の一部の要素のみを更新させることができる。 それすなわち、 通信量の大幅な削減 ページのちらつき低減 SPA(シングルページアプリケーション)の開発可能 ロングポーリングを使用した永続的な接続が可能(→オンラインチャットなどに転用可能) など、様々な恩恵が得られる。 Ajaxの実装は実質テンプレートとビュー、静的ファイルの編集のみと非常にシンプル。 今 ...
    続きを読む

  • 【Django】canvasで描画した画像をAjax(jQuery)で送信【お絵かきBBS、イラストチャット、ゲームのスクショ共有などに】
    例えば、チャットサイト、掲示板サイトでユーザーが描画したイラストを投稿できる形式にしたい時。 ユーザーが手元の端末でペイントツールを起動して画像を保存して、サイトに添付して貼り付けるのはやや面倒。それだけでなく、サイト独自のレギュレーション(お題に沿ってイラストを付け加える形式、指定された色しか使ってはいけないなど)がある場合、ユーザーのペイントツールでそれを強いるのは不可能に近い。 そこで、サイト上 ...
    続きを読む

  • FormDataをformタグではなく、オブジェクトにキーと値をセットした上でAjax送信
    タイトルの説明。 通常、Ajaxでサーバーにリクエストを送信する時、下記のようにFormDataクラスを使用して送信する。 const form_elem = "#form_area"; const data = new FormData( $(form_elem).get(0) ); const url = $(form_elem).prop("action"); const method = $(form_elem).prop("method"); $.ajax({ url: url, type: method, data: data, processData: false, contentType: false, dataType: 'json' }).done( function(data, status, xhr ) { //Done }).fail( function(xhr, status, error) { //Fail }); しかし、送信したいデータがいつもこのようにformタグで囲まれているとも限らない。 そこで、FormDataクラスに引数を入れずにオブジェクトを作り、オブジェクトにキーと値をセットしてAja ...
    続きを読む

  • Djangoで動画投稿時にサムネイルもセットでアップロードする【DRF+Ajax(jQuery)+canvas】
    Djangoで動画をアップロードする時、ffmpegなどを使ってサムネイルの自動生成を行うが、クライアントが自分で動画のサムネイルを指定したいときはこの限りではない。 サムネイルに指定したい画像は動画内にあり、クライアントがサムネイルの画像をまだ作っていない場合、アップロードフォームでサムネイルを作る必要がある。 本記事では動画を投稿する際、サムネイルをクライアントが指定した上でアップロードする手法を ...
    続きを読む

  • laravelでAjax(jQuery)を送信する【POST+DELETE】
    タイトルの通り。laravelにAjax(jQuery)を送信する。コードはLaravelでリクエストのバリデーションを行うを元に作られている。 jQueryを読み込みCSRFトークンをAjax送信時に付せて送信させる まずAjax送信用にjQueryを読み込ませる。それからPOSTリクエストの場合、CSRF対策用のトークンもセットで送信しなければならない。故に、resources/views/bas ...
    続きを読む

  • Djangoで多対多のリレーションを含むデータをAjax(jQuery)+DRFで送信させる
    本記事では多対多のリレーションを含んだウェブアプリで、Django REST FrameworkとAjaxを使用した非同期データ送信を実現させる方法を書く。 ソースコードは『【Django】一対多、多対多のリレーションでforms.pyを使ったバリデーションとフォームを表示』の『【2】forms.pyを使用したフォームバリデーション+独自に作ったテンプレート』から流用した。 Ajax(jQuery)+Restf ...
    続きを読む

  • DRF(Django REST Framework)+Ajax(jQuery)で画像とファイルをアップロードする方法
    本記事では、DRF(Django REST Framework)とAjaxを使用して画像とファイルを非同期でアップロードする方法をまとめる。 コードはDjangoで画像及びファイルをアップロードする方法から引用している。外見はほとんど変わっていない。 テンプレートとJSのコード まずテンプレート。下記はimage.html {% load static %} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>画像アップロードのテスト</ti ...
    続きを読む

  • DjangoでAjax(jQuery)を実装する方法【Django REST Framework使用】
    先日の記事にて、DjangoでAjax(jQuery)を実装する方法を解説した。 ただ、DjangoRESTFrameworkを使用すれば、さらに少ないコードでAjaxを実装することができる。 RestfulAPI、Django REST Frameworkとは RestfulAPIとは、HTTPリクエストに応じてサーバーの処理を切り分けることができるAPIのこと。 HTTPリクエストのヘッダ部には、リクエスト送信 ...
    続きを読む