I'm trying to POST a JSON object using fetch. From what I can understand, I need to attach a stringified object to the body of the request, e.g.: fetch("/echo/json/", { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: "POST", body: JSON.stringify({a: 1, b: 2}) }) .then(function(res){ console.log(res) }) .catch(function(res){ console.log(res) }) When using jsfi
ちなみに fetch API は WHATWG HTML Living Standard で定義されていて、W3C HTML 5.1 でもなければ ECMAScript2017 でもないです。 2017年現在 Safari や IE では未サポートなので https://github.com/github/fetch などの polyfill を使うと良いです。 post (application/x-www-form-urlencoded) const obj = {hello: "world"}; const method = "POST"; const body = Object.keys(obj).map((key)=>key+"="+encodeURIComponent(obj[key])).join("&"); const headers = { 'Accept': 'appl
jQueryを使わずにAjaxをしたくて、とはいえ生のXHR(XMLHttpRequest )を扱うのはめんどくさいっていうときに、Fetch APIを使ってみました。そのとき調べたことの覚え書きです。 Fetch APIって? ここに、Jxck先生のすばらしい記事があります。 jxck.hatenablog.com 正直ぜんぜん理解できてないのですが(🙇)、ものすごくざっくりいうと、 jQueryのAjax並に簡潔に記述できる Promiseベースの設計で、結果はPromiseで返される XHRよりも細かな制御ができる みたいな感じなのかなと思いました。 ちなみに、先の記事では単なるXHRの代わりじゃないと記載されてるので、FetchとかFetch APIの理解にはそちらを読んでもらった方がいいかと思います。。 ブラウザサポート状況 Can I use... Support table
こんにちは、@yoheiMuneです。 XMLHttpRequestに変わる次のAjax仕様としてfetchが策定されていますが、今日はそれを扱ったAjax通信をブログに書きたいと思います。 目次 fetchとは fetchとはwhatwgで策定されている、フロントエンドJavaScriptの次世代の非同期通信の規格で、XMLHttpRequestに取って代わるものです。例えば以下のような使い方ができます。 fetch('/user/1').then(response => { console.log(response.status); // 200 return response.json(); }).then(json => { console.log('json:', json); // json : { name : 'Yohei' } }); XMLHttpRequestに比べて
今日はこれまでに紹介したPropやStateを使ったComponent間でやりとりについて書きたいと思います。 親のStateを子のPropとして渡す Componentを設計する時はまずPropとしてI/Fを考えて、そのComponentが管理すべき値で変更されるものをStateとして定義します。 つまりComponent間での親子の関係を意識して、親がStateを持っていて子にPropとして渡すというのが基本になります。(子は使うだけで管理しているのは親) var User = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, id: React.PropTypes.number.isRequired }, render() { return ( <div>{this.props.id}:
Reduxの公式ExampleにあるTodo Listを機能ごとに作っていくシリーズ最終回です。 1回目では、TodoをTodo Listに追加する「Add Todo」を作りました。 2回目では、Todoの完了・未完了を切り替える「Toggle Todo」の機能を作りました。 3回目の今回は、表示するTodo Listを完了または未完了のTodoだけにする「Filter Todo」機能を作りたいと思います。 1,2回目を読んでない人は、そちらを先にどうぞ。 Redux ExampleのTodo Listをはじめからていねいに(1) Redux ExampleのTodo Listをはじめからていねいに(2) 機能開発の際、どこから手をつけるかは悩ましいところですが、私はactionから作ることが多いです。 だいたいactionCreatorとreducerの関数を作って、手動で(index.
概要 前回の続きです。 今回は、Djangoによるフォーム処理とコードの縮小化を中心に解説します。 フォームの作成 前回のチュートリアルで作成したpolls/detail.htmlを更新して、HTMLの<form>要素を入れましょう。 <h1>{{question.question_text}}</h1> {% if error_message %} <p> <strong>{{error_message}}</strong> </p> {% endif %} <form action="{% url 'polls:vote' question.id %}" method="post"> {% csrf_token %} {% for choice in question.choice_set.all %} <input type="radio" name="choice" id="cho
Webを支える技術を会社の先輩からお借りして読了しました。 自分で買ってまた読みたいです。 自分なりのまとめです。 第1回は第1部から第3部までをまとめました。 REST RESTとは Webのアーキテクチャスタイル。 RESTアーキテクチャスタイル クライアント/サーバ:ユーザーインターフェースと処理を分離する ステートレスサーバ:サーバ側でアプリケーション状態を持たない キャッシュ:クライアントとサーバの通信回数と量を減らす 統一インターフェース:インターフェースを固定する 階層化システム:システムを階層に分離する コードオンデマンド:プログラムをクライアントにダウンロードして実行する WebサービスやWebAPIがRESTfulになると、Webは全体としてよりよくなっていく。 URI URIとは Uniform Resource Identifier。リソースを統一的に識別するIDの
HTTPとは HTTPの概要 HTTPとは、WebサーバとWebクライアントの間でデータの送受信を行うために用いられるプロトコル (引用元)http://e-words.jp/w/HTTP.html プロトコルとは、難しく言うと通信規約、簡単に言えば約束事や取り決めのこと つまり、Webサーバとクライアントは、HTTPというプロトコル(決まった方法)でやりとりしましょうねということ HTTP通信の中身 HTTPでサーバとクライアントがやりとりするメッセージ(HTTPメッセージ)は基本的に以下のような形になっている GET /index.html HTTP/1.1 Host: localhost:8080 Connection: keep-alive User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit
こんにちは、@yoheiMuneです。 今日は前回のPython入門に引き続き、リスト内包表記というPythonの素敵な書き方をブログに書きたいと思います。この書き方を本で見て、Pythonを使えるようになりたいと僕は思いました(ミーハーですねw)。リスト内包表記が書けるようになると、後述の通り色々とメリットがあるのでぜひ学んでみてください。 https://flic.kr/p/24JYSq 1行で書くリスト処理 さっそくリスト内包記述(list comprehension)を扱いたいと思います。今回は以下の配列データを扱うこととします。 data = [1, 2, 3, 4, 5] この配列について、各要素の値を2倍にする処理を通常のfor文で記述すると、以下のようになります。 # data配列の中身を2倍にする newData = [] for d in data: newData.a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く