質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

729閲覧

AjaxとaタグのDownload属性を用いてMySQLのテーブルのデータをCSV形式で落とす際に、href属性の値であるJSの変数をなぜ+で囲むのかがわからない。

kamille-mio

総合スコア24

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/09/12 19:25

Youtubeの動画にあるMySQLのテーブルからデータをaタグのDownload属性でCSV形式としてダウンロードするというチュートリアルを見ていたのですが、

jquery

1$("#response").html('<a href="'+data+'" download="users.csv">Download here!</a>');

そのコード中の上記の部分においてなぜ+data+という書き方をするのかわかりません。
自分がJavaScript及びjQueryにあまり明るくないためか、コードの処理やdataがjQueryにおいて定義した変数とPHPからレスポンスされてきたデータが接続されたものであるというところはわかるのですが、そこでなぜ「href = "'data'"」ではなく上記のような書き方になるのかが検索しても引っかからずここで質問させていただきました。

以下はコード全文とチュートリアル元の動画リンクです。
PHP部分とHTML及びjQuery部分は分けて書いてありますが、実際は一緒に書いています。

チュートリアル元の動画

php

1 2<?php 3 $conn = new mysqli("localhost","root","","register"); 4 5if (isset($_POST['start'])) { 6 $start = $conn->real_escape_string($_POST['start']); 7 $allData = ""; 8 $sql = $conn->query("SELECT * FROM users LIMIT $start,50"); 9 while($data = $sql->fetch_assoc()) 10 $allData .= $data['id'] . ',' . $data['name'] . ',' . $data['email'] .','. $data['password'] 11 . ',' . $data['isEmailConfirmed'] . ',' . $data['token'] .','. $data['tokenExpire'] . "\n"; 12 13 exit (json_encode(array("data" => $allData))); 14 15} 16 17$sql = $conn->query("SELECT id FROM users"); 18$numRows = $sql->num_rows; 19 20 ?>

HTML

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Export MySQL Data To CSV</title> 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 7 </script> 8 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"> 9 </script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 11 </script> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 13 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 14 </script> 15 </head> 16 <body> 17<p id="response">Please Wait......</p> 18 <script type="text/javascript"> 19 let data = "data:text/csv;charset=utf-8,ID,NAME,EMAIL,PASSWORD,isEmailConfirmed,TOKEN,TOKEN EXPIRE\n"; 20 21 $(document).ready(function() { 22 exportToCSV(0,<?php echo $numRows ?>) 23 24 }); 25 26 function exportToCSV(start,max) { 27 if (start > max) { 28 $("#response").html('<a href="'+data+'" download="users.csv">Download here!</a>'); 29 return; 30 } 31 32 33 $.ajax({ 34 url:"index.php", 35 method:"POST", 36 dataType:"json", 37 data: { 38 start:start 39 }}) 40 41 .then( 42 function (response) { 43 data += response.data; 44 exportToCSV((start+50), max); 45 }, 46 function(){ 47 alert("ERROR"); 48 }); 49 } 50 51 </script> 52 </body> 53 </html> 54

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Y.H.

2019/09/12 23:21

ブラウザの開発者ツール等で実際にどんなリクエストを送信してるか見てみるといいですよ
guest

回答3

0

投稿2019/09/12 20:22

編集2019/09/12 20:22
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

今風にかくとこんな感じのこと

javascript

1$("#response").html(`<a href="${data}" download="users.csv">Download here!</a>`)

投稿2019/09/13 00:11

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kamille-mio

2019/09/13 03:49

回答ありがとうございます。この書き方なら問題なく理解できます。
guest

0

ベストアンサー

既に回答がありますが、結合演算子の + を使って記述しているかと思います。

PHP の場合、. で文字列などを結合しますが、JavaScript は + で結合します。

<a href="data" download="users.csv">Download here!</a> を結合しています。

data は変数なので、実際にはその箇所には変数の値が表示されます。

<a href="" download="users.csv">Download here!</a> は HTML の記述ですが、JavaScript上ではただの文字列です。

ですので、' で囲っています。

$("#response").html('<a href="'+data+'" download="users.csv">Download here!</a>')

上記の記述は、言い換えれば $("#response").html( '文字列' + 変数 + '文字列' ) のように結合しています。

投稿2019/09/12 20:30

編集2019/09/12 20:46
7968

総合スコア253

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kamille-mio

2019/09/13 03:52

結合演算子以外ありえないとは思っていたのですが、どこを結合しているんだと悩んでいたら何のことはない、JSの領域ではマークアップ言語でもただの文字列という初歩的なことでした……灯台もと暗し。 他の方に書いていただいた$("#response").html(`<a href="${data}" download="users.csv">Download here!</a>`)という書き方ならそれも見落とすこともなかったとはいえ、学がまだまだ浅いということですね。 詳しく解説して頂いてありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問