我是javascript的新手,我基本上尝试创建一个显示文件名的下拉菜单。然后,用户将选择一个并从数据库中检索并打开到我的画布上的文件。我无法弄清楚如何将selectedText变量传递给我的php select语句。
我确定这一行是问题
数据库文件
$st= $_POST['selectedText'];
try{
$stmt = $user->runQuery("SELECT canvas_json FROM Tactical_canvas WHERE canvas_name = ':st'");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $ex){
echo $ex->getMessage();
}
echo $result[0]['canvas_json'];
javascript应该发送从下拉列表中选择的selectedText值。如果我使用警报,我可以看到正确的值被选中,但php没有收到它......
$("#Open").click(function(){
openCanvas();
});
$("#select_option").on('change', function(){
chooseCanvas();
});
function chooseCanvas(){
var canvasSelect = document.getElementById("select_option");
var selectedText = canvasSelect.options[canvasSelect.selectedIndex].value;
$.ajax({
type: 'POST',
url: 'canvasLoadByName.php',
data: {selectedText: selectedText},
success: alert(selectedText + " has been selected!")
});
}
然后openCanvas会显示所做的选择,如果我手动输入一个值来选择
,则效果很好function openCanvas(){
$.ajax({
type: "GET",
url: "canvasLoadByName.php",
data: "json",
success: function (result){
canvas.loadFromJSON(result);
canvas.renderAll();
fabric.log(result);
}
});
}
html
<button type="button" class="btn btn-default button-group action cyan darken-4" data-toggle="modal" data-target="#uploadFile2">Upload2</button>
<!-- Modal -->
<div class="modal fade" id="uploadFile2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload File</h4>
</div>
<?require'canvasLoad.php'
?>
<option value="showAll" selected="selected">Choose a file to open</option>
<div id="select_box">
<option>Select canvas</option>
<select id="select_option">
<?php
foreach ($result as $row) {
echo "<option>".$row['canvas_name']."</option>";
}
?>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-default button-group action cyan darken-4" id="Open" data-dismiss="modal">Open</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
编辑:
您可能需要在回显数据之前对json数据进行编码。
喜欢echo json_encode($result[0]['canvas_json']);
您需要使用分号来结束html文件中的require语句。
<?require'canvasLoad.php'
?>
应该是:
<?require'canvasLoad.php';
?>
文档:http://php.net/manual/en/function.require.php
编辑:打开PHP代码时,您还应确保使用<?php
而不是<?
。除非在php.ini文件中启用,否则将无法读取。
答案 1 :(得分:0)
如果我没有错,你正在调用同一个文件&#34; canvasLoadByName.php&#34;来自2个ajax函数。一个ajax函数使用post方法,另一个使用get方法,根据你的代码spinet,你试图每次都发布变量&#34; $ st = $ _POST [&#39; selectedText&#39;];&#34 ;。你应该使用一些案例来处理这个问题,或者只使用&#34; isset()&#34;解决问题的方法。
答案 2 :(得分:0)
编辑#2(警告,提前发帖): 我把您在初始问题中发布的代码略微修改了一下。 我想你想得到这样的东西:
第1步:
第2步:
控制台中的其他调试输出:
数据库表架构:
dropdown.php:
<!doctype html>
<html>
<body>
<button type="button" class="btn btn-default button-group action cyan darken-4" data-toggle="modal"
data-target="#uploadFile2">Upload2
</button>
<!-- Modal -->
<div class="modal fade" id="uploadFile2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload File</h4>
</div>
<?php require 'canvasLoad.php'; ?>
<option value="showAll" selected="selected">Choose a file to open</option>
<div id="select_box">
<option>Select canvas</option>
<select id="select_option">
<?php
foreach ($result as $row) {
echo "<option>" . $row['canvas_name'] . "</option>";
}
?>
</select>
</div>
<br><br>
<div class="modal-footer">
<button class="btn btn-default button-group action cyan darken-4" id="Open" data-dismiss="modal">Open
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$("#Open").click(function () {
openCanvas();
});
$("#select_option").on('change', function () {
chooseCanvas();
});
function chooseCanvas() {
var e = document.getElementById("select_option");
var selectedText = e.options[e.selectedIndex].text;
$.ajax({
type: 'POST',
url: 'canvasLoadByName.php',
data: {selectedText: selectedText}
}).done(function (result) {
alert(selectedText + " has been selected!");
result = JSON.parse(result);
console.log(result);
*// do whatever you want with the json data here*
});
}
//openCanvas should then display the choice made and is working perfectly if I manually input a value to select
function openCanvas() {
var e = document.getElementById("select_option");
var selectedText = e.options[e.selectedIndex].text;
$.ajax({
type: "GET",
url: "canvasLoadByName.php",
dataType: "json",
data: {selectedText: selectedText}
}).done(function (result) {
//canvas.loadFromJSON(result);
//canvas.renderAll();
//fabric.log(result);
console.log(result); // debug output
*// do whatever you want with the json data here*
});
}
</script>
</body>
</html>
canvasLoad.php
<?php
$pdo = new PDO('mysql:dbname=test;host=127.0.0.1', 'username', 'password');
try {
$stmt = $pdo->prepare("SELECT * FROM tactical_canvas");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $ex) {
echo $ex->getMessage();
}
canvasLoadByName.php
$st = $_REQUEST['selectedText']; // I know, I know...
$pdo = new PDO('mysql:dbname=test;host=127.0.0.1', 'username', 'password');
try {
$stmt = $pdo->prepare("SELECT canvas_json FROM tactical_canvas WHERE canvas_name = :st");
$stmt->execute(array(':st' => $st));
$result = $stmt->fetch(PDO::FETCH_ASSOC);
} catch(PDOException $ex) {
echo $ex->getMessage();
}
echo json_encode($result);
如果它仍然不适合你,或者它不是你想要的,我很抱歉。如果出现问题,请随时提出。
<小时/> 编辑#1:@Adam Patterson是对的,你需要输出json_encode()。此外,区分是GET还是POST的情况也很有用。
在第
行$stmt = $user->runQuery("SELECT canvas_json FROM Tactical_canvas WHERE canvas_name = ':st'")
使用命名参数(:st),但
$stmt->execute();
应该是
$stmt->execute(array(':st' => $st));
因此您的参数实际上会使用$ _POST变量中的值填充。这应该是您的应用程序无法正常工作的主要原因。
在Ajax GET请求中,
data: "json"
应该是
dataType: "json"
因为你没有发送“json”作为数据(我想)。
<?require'canvasLoad.php'
?>
缺少一个分号(并且&lt;?php更适合更好的便携性,但最后是个人偏好)
答案 3 :(得分:0)
我赞成所有人,因为你们都给了我很好的建议,所以非常感谢你的帮助。
我更改了我的javascript,因此只有方法用于选择工具和打开按钮,现在看起来似乎完美无缺。
我的noob大脑仍然不确定为什么它不能用我之前的格式工作,但显然与调用相同php文件的两个函数有关。
任何人都有兴趣或者感兴趣的是我必须改变的东西,这基本上只是将两个javascript函数(openCanvas和chooseCanvas)合二为一。
function chooseCanvas(){
var canvasSelect = document.getElementById("canvas_name");
var canvas_name = canvasSelect.options[canvasSelect.selectedIndex].text;
$.ajax({
type: "POST",
url: "canvasLoadByName.php",
dataType: "json",
data: {canvas_name: canvas_name},
success: function (result){
alert(canvas_name + " has been selected!"),
$("#Open").click(function() {
canvas.loadFromJSON(result);
canvas.renderAll();
console.log(result);
});
}
});
}
除了我将$ st更改为$ canvas_name。
之外,php保持不变$canvas_name= $_POST['canvas_name'];
try {
$stmt = $user->runQuery("SELECT canvas_json FROM Tactical_canvas WHERE canvas_name = '$canvas_name'");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $ex){
echo $ex->getMessage();
}
echo ($result[0]['canvas_json']);
我尝试更改
$stmt->execute();
建议(除了使用canvas_name而不是st
$stmt->execute(array(':st' => $st));
我的结果没有任何差异..
<强>干杯强>