自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

ajax

  • 【VanillaJS】Djangoで素のJavaScriptのXMLHttpRequest(Ajax)を使ってリクエストを送信【jQuery不使用】
    POSTメソッドを送信する 前項で取得したCSRFトークンをリクエストヘッダにセットして送信する。 window.addEventListener("load" , () => { const submit = document.querySelector("#submit"); submit.addEventListener( "click", () => { send(); }); }); const send = () => { const form_elem = "#form_area"; const form = document.querySelector(form_elem); const data = new FormData( form ); const url = form.getAttribute("action"); const method = form.getAttribute("method"); // formタグ内のデータを確認。 for (let v of data ){ console.log(v); } const request = new XMLHttpRequest(); //送信先とメソッドの指定 request.open(method,url); // formタグ内にcsrf_tokenが含まれているため不要。 //console.log(csrftoken); //request.setRequestHeader("X-CSRFToken", csrftoken); //送信(内容) request.send(data); //成功時の処理 request.onreadystatechange = () => { if( request.readyState === 4 && request.status === ...
    続きを読む

  • 【保存版】Ajax(jQuery)の仕組みと仕様
    本記事は、たびたび忘れがちなAjaxのパラメータや引数などの意味を思い返すための備忘録である。 let form_elem = "#form_area"; let data = new FormData( $(form_elem).get(0) ); let url = $(form_elem).prop("action"); let method = $(form_elem).prop("method"); $.ajax({ url: url, // リクエストの送信先 type: method, // 送信するリクエストのメソッド data: data, // 送信するデータ(FormDataオブジェクト型) processData: false, // dataに指定した内容をURLエンコードして送信(?page=2などの形式)にするかの指定。FormDataオブジェクトの場合はfalseを指定 contentType: false, ...
    続きを読む

  • WebSocketとポーリング、ロングポーリングの違い【非同期通信と双方向通信】
    前説 非同期通信 非同期通信とは、2人以上のユーザーがそれぞれ自分たちの都合のいいタイミングでデータを受信し、通信をすることである。 同期通信とは、リクエストを送信した後、レスポンスを受け取るまで何もできない。 非同期通信ではリクエスト送信をJavaScriptに任せることで、リクエスト送信後からレスポンスを受け取るまでに、続けて処理を行うことができる。 この非同期通信を行うために使用する技術がAjaxであ ...
    続きを読む

  • 【Django】Ajax(jQuery)でロングポーリングを実装させる【チャットサイトの開発に】
    Ajaxを使えば、ページを部分的に更新させることができる。 そして、setTimeoutを使うことで、指定した時間おきにページを部分的に更新することができる。 ただ、Ajaxによるリクエストとレスポンスを繰り返している(ただのポーリング)ようでは、ウェブサーバーに負担が掛かってしまう。 クラウドサーバーなどは死活問題で、負荷が増えると課金してサーバーの強化などを考慮しなければならない。 そこで、リクエスト ...
    続きを読む

  • 【Django】Ajaxで複数枚の画像を一回のリクエストでアップロードする。
    経緯 例えば、1つのデータに対して、複数枚の画像を記録したい場合がある。 ECサイトの商品がその例で、1つの商品に対して、複数枚の画像を記録する必要がある。 しかも、商品に対して記録する画像の枚数が10枚以上になる可能性もあり、これを1つのモデルに画像フィールド10個などとしているようではDBの構造上の問題に発展する。 だからこのような場合は、商品モデルと商品画像モデルの1対多のリレーションを組むべきであ ...
    続きを読む

  • 【Python】GoogleのISBNのAPIを使い、書籍の情報を手に入れる
    GoogleのISBN検索ができるAPIを使うことで、書籍の情報を簡単に手に入れることができる。 もちろん、書籍のサムネイルも取得可能。スクレイピングではないので、サイトの変化に合わせて手直しが必要になることもない。 アカウントの登録も不要 #! /usr/bin/env python3 # -*- coding: utf-8 -*- import requests try: result = requests.get("https://www.googleapis.com/books/v1/volumes?q=isbn:9784873117782") except: print("通信エラー") else: #返却されたJSONを辞書型に変換する。 data = result.json() print(data) print(data["items"][0]["volumeInfo"]) #書籍情報を手に入れる。 print(data["items"][0]["volumeInfo"]["title"]) print(data["items"][0]["volumeInfo"]["publishedDate"]) print(data["items"][0]["volumeInfo"]["authors"]) print(data["items"][0]["volumeInfo"]["description"]) print(data["items"][0]["volumeInfo"]["imageLinks"]["thumbnail"]) ...
    続きを読む

  • 【Restful化】DjangoRestframeworkの導入・移行作業【ビュークラス継承元の書き換え、Serializerの運用】
    Restful化のためには、DjangoRestframeworkをインストールする必要がある。(素のDjangoでもAjaxでDELETE,PUT,PATCHメソッドの送信は可能だが、リクエストボディの読み込みに難があるため。) だが、素のDjangoで開発している状態であれば、コードの一部をDRF仕様に書き換えを行う必要がある。 本記事では、40分Djangoを元にDRF移行手続きを解説する。 予め ...
    続きを読む

  • DjangoRestFrameworkは本当に必要なのか？【Restful化とAjaxでデータを送信するときの問題】
    結論 DjangoはデフォルトでRestfulに対応している(Ajaxを使ってPUT,DELETE,PATCHメソッドの送信ができる)。 ただし、PUT,DELETE,PATCHのリクエストボディを参照するのはやや複雑。 そのため、それらのメソッドを使ってリクエストを送信する場合、DRFを使ったほうが良い。 素のDjangoはRestfulに対応している AjaxでPUT,DELETE,PATCHメソッドを ...
    続きを読む

  • 【jQuery】Ajaxで郵便番号検索を行う【通販サイトなどの住所登録に有効】
    通販サイトなどでは、郵便番号を入力すると、住所の入力を自動で行ってくれる。 本記事では郵便番号検索の実装を解説する。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> </head> <body> <input id="postcode" type="text" name="postcode" placeholder="ここに郵便番号を入力する(ハイフン不要)"> <input id="postcode_search" type="button" value="郵便番号検索"> <input id="prefecture" type="text" name="prefecture" placeholder="都道府県"> ...
    続きを読む

  • 【Django】PUT、PATCH、DELETEメソッドのリクエストを送信する【Django REST Framework】
    前提 まず前提として、PUT、PATCH、DELETEのメソッドはHTMLのformタグから送信することはできない。 例外として、Laravelでは下記のようにしてformタグでDELETEメソッドを送信するが、Djangoではそれは通用しない。これから解説するDjango Rest Frameworkを使用しても。 <form action="{{ route('topics.destroy',$topic->id) }}/" method="POST" style="display:inline-block;"> {{ csrf_field() }} {{ method_field("delete") }} <button class="btn btn-outline-danger" type="submit">削除< ...
    続きを読む