What I am trying to do:
I am trying to pass the ID of the button pressed to my PHP script through jQuery's AJAX function. I then use the information to run a query that returns 2 rows, I save each as an array, respectively $rTitle_array[]
and $qTitle_array[]
, I json_encode
each and I then want to send them back to my index.html and use them in my generateProblems
function.
I sadly cannot figure out how to pass them back and then use them.
Here's my JavaScript:
$(function() {
//Take id of the button pressed and save it as userID
$("#buttons").find(".btn").click(function() {
var userID = this.id;
$.ajax({
type: "POST",
url: 'include/responseget.php',
data: {
userID: userID
},
success: function(data) {
alert("success!");
}
});
});
var phase = 0;
var rTitle = <?php echo json_encode($rTitle_array); ?>;
var rText = <?php echo json_encode($rText_array); ?>;
//Function to generate html based on query results
function generateProblems(param) {
var problemDef = param;
$("#buttons").hide();
var numbers = [1, 2, 3, 4, 5, 6, 7, 8];
for (var i = 0; i < 8; i++) {
$('<div>' + rTitle[i] + '</div>').data('number', rTitle[i]).attr('id', 'problem' + rTitle[i]).appendTo('#testpile').draggable({
containment: '.site-wrapper',
stack: '#testpile div',
cursor: 'move',
revert: true
});
$('<div>' + rText[i] + '</div>').data('number', rText[i]).attr('id', 'problem' + rText[i]).appendTo('#testpile');
}
$('#testdrop').droppable({
drop: handleDropEvent,
accept: '#testpile div'
});
//Function to restart generateProblems when draggable is dragged to specific place
function handleDropEvent(event, ui) {
var problemNumber = ui.draggable.data('number');
var problemCombination = problemDef + problemNumber;
ui.draggable.draggable('disable');
ui.draggable.draggable('option', 'revert', false);
phase++;
alert('ProblemCombination is "' + problemCombination + '", phase is "' + phase + '" ');
$("#testpile").children().hide();
generateProblems(problemCombination);
}
}
});
And here's my PHP:
<?php include 'login.php';
if(isset($_POST['userID'])){
$id = $_POST['userID'];
$stmt = $conn->prepare("SELECT DISTINCT AnswerTitle, AnswerText FROM question_answers
INNER JOIN question
ON question_answers.QuestionID=question.QuestionID
INNER JOIN answer
ON question_answers.AnswerID=answer.AnswerID
WHERE AnswerGroup = ?;");
$stmt->bind_param('s', $id);
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc())
{
$rTitle_array[] = $row['AnswerTitle'];
$rText_array[] = $row['AnswerText'];
}
echo json_encode($rTitle_array);
echo json_encode($rText_array);
}
// close connection
mysqli_close($conn);
?>
I simply do not know how to fetch or pass the arrays back to my JavaScript correctly, so I can use them for my function.
The data outputted by scripts is handled as single response from your script. What you can do is combine two arrays on server side to look like:
$response = array(
'rTitle' => $rTitle_array,
'rText' => $rText_array
);
Then perform json_encode
on this combined array and output it. So, instead of
echo json_encode($rTitle_array);
echo json_encode($rText_array);
you write
echo json_encode($response);
Now as for client side, one of possible ways to handle response is:
$.ajax
request so that it will say the server that we wait a response in json
format by setting dataType
param to 'json'
. success
data as json! Example:
var rTitle, rText;
$.ajax({
type: "POST",
url: 'include/responseget.php',
dataType: 'json',
data: {
userID: userID
},
success: function(json) {
rTitle = json.rTitle;
rText = json.rText;
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.