Save variables from jQuery to PHP [duplicate] - php

Question

This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 1 year ago.
this is my code:
<script>
jQuery(function() {
jQuery.getJSON('lessons.json', function(data) {
var lessonID = data.t["sfwd-lessons"];
$.each(lessonID, function(i, val) {
lessonID = val;
console.log(lessonID);
})
});
});
</script>
I get a list of IDs that I can use for different curl api call.
So, what's the best way to pass these jquery variables to PHP for an api call?
It should be something like this:
curl_setopt_array($curl, array(
CURLOPT_URL => 'https://website.com/wp-json/ldlms/v2/sfwd-lessons/'.lessonID,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'GET',
CURLOPT_HTTPHEADER => array(
'Authorization: Bearer '.$token.'',
'Cookie: cookie'
),
));
Thank you all.

Answer 1

There are three steps: (1) Retrieving DOM data: inputs, textarea, etc, (2) Sending via AJAX, (3) Retrieving it in PHP:
1 - DOM Data with jQuery: build a single object (easier to send)
let myData = {
name: $('#name').val(),
description: $('#description').val(),
...
}
2 - Send it via Ajax:
jQuery.ajax({
data: myData,
url: PHPurl,
type: "post",
method: "POST",
success: function (response) {
// whatever
},
error: function (e) {
// whatever
}
});
3 - Retrieve it in PHP
$name = isset($_POST['name']) ? $_POST['name'] : '';
$description = isset($_POST['description']) ? $_POST['description'] : 'default description';
... more data
Now if you need to make a cURL call using that data, you have two options:
Pass an array and use header Content-Type 'multipart/form-data':
$data = array(
'name' => $name,
'description' => $description,
...
);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
Or encode the same array as json, and use header Content-Type 'application/json':
$data = array(...);
$data = json_encode($data);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
---- EDIT
(Relative to your question below) I see you read a 'lessons.json'. So you get a list of lessons from there. In that case you need to keep the relation between each lesson object, and the DOM elements. For example:
for(let lesson of lessons) {
// Create your HTML inputs to edit the lesson
let container = $("<div class='lesson-editor'></div>");
container.append(...);
container.append(...);
// Now add a reference to the ID of the lesson
container.attr("lessonId", lesson.ID);
}
Now you have an editor for each lesson, and each "container" has the ID of the lesson it's editing.
Later in Javascript, when you want to build your list of lessons and send it with AJAX:
let lessons = [];
let containers = $(".lesson-editor");
containers.each(function() {
let ID = $(this).attr("lessonId");
let lesson = {
ID: ID,
name: $(this).find("#nameInput"),
description: $(this).find("#descInput"),
....
}
lessons.push(lesson);
});
// -> ajax, data: { lessons: lessons }
Then remember that in PHP you have $_POST['lessons'] that is an array of objects (associative arrays).