Django×Javascriptよくやることまとめ

Djangoアプリ開発中に何度も調べていることをまとめておきます

Contents

1 DBデータを取得して次の処理を実行
2 データの返却を待ってから次の処理へ
3 検索ワードの送信
4 JavaScriptから送ったリスト型を、viewsで取得する

DBデータを取得して次の処理を実行

JavaScript

const csrftoken = Cookies.get('csrftoken');
source_id = 1
if(source_id != ""){
  $.ajax({
       url: '/api/data/',
       headers: {'X-CSRFToken': csrftoken},
       type: 'POST',
       async: false, //同期通信にして、UI操作をブロックしたい場合のみ
       data: {
         'source_id': source_id,
       },
       success: function(data){
            //成功時の処理
            item_name = data&#91;"item_name"]
            item_price = data&#91;"item_price"]
            anotherfunction(item_name, item_price)
       },
       error: function(e){
            //エラー時の処理
       }
     });
  }

const csrftoken = Cookies.get('csrftoken');

source_id = 1

if(source_id != ""){

$.ajax({

url: '/api/data/',

headers: {'X-CSRFToken': csrftoken},

type: 'POST',

async: false, //同期通信にして、UI操作をブロックしたい場合のみ

data: {

'source_id': source_id,

success: function(data){

//成功時の処理

item_name = data["item_name"]

item_price = data["item_price"]

anotherfunction(item_name, item_price)

error: function(e){

//エラー時の処理

}

});

}

views.py

def item_data(request):
    item = Items.objects.get(id=request.POST&#91;'source_id'])
    json_data = {
      item_name = item.name,
      item_price = item.price,
    }
    return JsonResponse(json_data,safe=False)

def item_data(request):

item = Items.objects.get(id=request.POST['source_id'])

json_data = {

item_name = item.name,

item_price = item.price,

}

return JsonResponse(json_data,safe=False)

データの返却を待ってから次の処理へ

JavaScript側。views側は1番目と同じです。

var data = data_update(id,order);
data.then(
  function (data) {
      console.log(data);
  },
  function (error) {
      console.log(error);
  }
);

function data_update(id,order){
  var data = $.ajax({
             url: '/update_item_order/',
             headers: {'X-CSRFToken': csrftoken},
             type: 'POST',
             data: {
               'id': id,
               'order':order,
             },
           });
    return data
}

var data = data_update(id,order);

data.then(

function (data) {

console.log(data);

function (error) {

console.log(error);

}

);

function data_update(id,order){

var data = $.ajax({

url: '/update_item_order/',

headers: {'X-CSRFToken': csrftoken},

type: 'POST',

data: {

'id': id,

'order':order,

});

return data

}

検索ワードの送信

JavaScript側。views側は1番目と同じです。

const searchText = document.getElementById("inlineFormInputGroup");
const searchBtn = document.getElementById("search-btn");

searchBtn.addEventListener("click", function() {
  const text = searchText.value;
  if (text.replace(/\s+/g, "")) {
    postSearchText(text);
  }
}, false);

async function postSearchText(searchText){
    const csrftoken = Cookies.get('csrftoken');
    const postBody = {
        text: searchText,
    };
    const postData = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": csrftoken,
        },
        body: JSON.stringify(postBody)
    };
    const res = await fetch("./search", postData) //postDataを送信
    const json_data = await res.json(); //viewsからの戻り値の取得
    const item_list = json_data&#91;'item_list']
}

const searchText = document.getElementById("inlineFormInputGroup");

const searchBtn = document.getElementById("search-btn");

searchBtn.addEventListener("click", function() {

const text = searchText.value;

if (text.replace(/\s+/g, "")) {

postSearchText(text);

}

}, false);

async function postSearchText(searchText){

const csrftoken = Cookies.get('csrftoken');

const postBody = {

text: searchText,

};

const postData = {

method: "POST",

headers: {

"Content-Type": "application/json",

"X-CSRFToken": csrftoken,

body: JSON.stringify(postBody)

};

const res = await fetch("./search", postData) //postDataを送信

const json_data = await res.json(); //viewsからの戻り値の取得

const item_list = json_data['item_list']

}

JavaScriptから送ったリスト型を、viewsで取得する

JavaScriptから送るデータのイメージ

item_num = 3
tana_list = &#91;1,2,3]
for (var i = 0; i&lt;item_num; i++){
    var position = {}
    position&#91;'item'] = item
    position&#91;'tana_id'] = tana_id
    position&#91;'order'] = order
    items_position.push(position)
}

item_num = 3

tana_list = [1,2,3]

for (var i = 0; i<item_num; i++){

var position = {}

position['item'] = item

position['tana_id'] = tana_id

position['order'] = order

items_position.push(position)

}

views.pyでの受け取り方

def update_tana_order(request):
    json_body = request.POST
    item_num=json_body&#91;"item_num"]  //数値やテキストなど
    tana_list=json_body.getlist('tana_list&#91;]') //リスト
    for i in range(int(item_num)): //辞書型×配列
          item = json.loads(json_body&#91;'items_position&#91;' + str(i) + ']&#91;item]'])
          tana_id = json.loads(json_body&#91;'items_position&#91;' + str(i) + ']&#91;tana_id]'])
          order = json.loads(json_body&#91;'items_position&#91;' + str(i) + ']&#91;order]'])

def update_tana_order(request):

json_body = request.POST

item_num=json_body["item_num"] //数値やテキストなど

tana_list=json_body.getlist('tana_list[]') //リスト

for i in range(int(item_num)): //辞書型×配列

item = json.loads(json_body['items_position[' + str(i) + '][item]'])

tana_id = json.loads(json_body['items_position[' + str(i) + '][tana_id]'])

order = json.loads(json_body['items_position[' + str(i) + '][order]'])