Вставка переменной php в базу данных после изменения элемента DOM javascript
У меня есть поле базы данных, которое является длинным тестом, это целая страница пользователей. Я хочу разрешить пользователю редактировать части своей страницы. Невозможно искать длинную строку текста и просто обновлять определенные части, поэтому я хочу иметь идентификаторы в коде и выполнять dom getElementbyId и изменять внутренний html в правильных местах, а затем вставлять новый код в БД. Однако это работает, когда я повторяю страницу, но не вставляю ее обратно в базу данных. Если это сбивает с толку, посмотрите, что я имею в виду ниже
Это работает, когда я повторяю $var, он говорит привет, парень:
<?php
$newVar = "hello guy";
$var = "<p id='hello world'></p>";
echo $var;
?>
<script>
document.getElementById("demo").innerHTML = "<?php echo $newVar; ?>";
</script>
Но при вставке в базу данных это привет, мир, а не привет, парень:
<?php
$newVar = "hello guy";
$var = "<p id='hello world'></p>";
$stmt = $conn->prepare("INSERT INTO temp429 (post_content) VALUES (?)");
$stmt->bind_param("s", $var);
$stmt->execute();
?>
<script>
document.getElementById("demo").innerHTML = "<?php echo $newVar; ?>";
</script>
Я ожидаю, что привет, парень, будет вставлен в базу данных, как это показано при отображении, но не делает этого. Есть ли какое-нибудь решение по этому поводу?
Ну да, я знаю ответ, который я получу хорошо, javascript - это клиентская сторона, а php - серверная, и я это понимаю, но мне просто любопытно, знает ли кто-нибудь способ обойти это. Да, я хочу «привет, парень», который изменил javascript, чтобы вставить его в БД, а не в оригинальный привет, мир.
Я знаю, что кажется, что просто поместите $newVar в bind_param, но переменная $var на самом деле будет кучей текста, который нельзя изменить. Я просто хочу изменить некоторые элементы $var. Это всего лишь пример с одной строкой.
$var больше похож на шаблон? Например, будет ли правильно сказать $var = 'Good afternoon <first name here>, your current balance is <balance>';, и вы хотели бы иметь возможность автоматически подставлять данные в <first name here> и <balance>?
Я думаю, что AJAX — это решение, которое вы ищете, не так ли?
точно! и в таблице базы данных сообщений wordpress раздел контента представляет собой всего один длинный текст, но я хочу, чтобы пользователи могли изменять только определенные части страницы
мое "отлично!" был для @ChrisForrence, но coryCoolguy я мог бы изучить AJAX. Какие-либо предложения?
Я предполагаю, что мой вопрос в том, есть ли какая-то особая причина, по которой вы не хотели бы вставлять некоторые поля ввода текста и просто создавать веб-форму?
да, страницы в wordpress, и это для пользователей, которые уже создали страницы. Если они делают все данные сразу, это легко сделать с помощью веб-формы. Но я хочу позволить им просто менять определенные детали. но в таблице wp_post поле «post_content» — это всего лишь одна длинная строка.
Ага. Тогда определенно решение будет включать AJAX ?
поэтому моя идея состоит в том, чтобы просто изменить шаблоны создателя страницы, чтобы иметь идентификатор, относящийся ко всем изменяемым частям, тогда, если они просто хотят изменить определенные части, я могу просто найти идентификатор и изменить этот раздел только как мой вопрос, но не работает при попытке для повторной вставки, я подозреваю, потому что javascript является клиентом, а php - сервером.
Окей круто. Я использую некоторые ajax, поэтому, если вы можете просто дать мне представление о том, как подойти к проблеме, я могу понять это. Я должен уйти сейчас, но когда я снова войду в систему, я могу дать вам ответ без проблем (или вам, Крис, если у вас есть ответ?). Благодарим за помощь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Лучший способ сделать это — запрос ajax/xhr.
Вот пример, когда пользователь вводит идентификационный номер и загружает файл Excel.
<script type = "text/javascript">
document.addEventListener("DOMContentLoaded", function () {
$("#simplePricingReportUpdateForm").submit(function (e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{!!csrf_token()!!}'
}
});
var form = $('#simplePricingReportUpdateForm');
var formData = new FormData(form[0]);
formData.append("customerId", $('#customerId').val());
$.ajax({
method: 'POST',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
cache: false,
url: "/simplePricingReport/postAjax/",
data: formData,
xhrFields: {
responseType: "blob"
},
"success": function (response) {
var file = document.getElementById("ReportToUpdate");
var filename = file.files[0].name;
var a = document.createElement("a");
var url = window.URL.createObjectURL(response);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}
});
});
});
После этого javascript вам нужно будет настроить свою систему (будь то фреймворк или доморощенная), чтобы принять этот запрос по указанному вами URL-адресу.
В laravel я делаю это в маршрутах
Route::post('simplePricingReport/postAjax','simplePricingReportController@postAjax');
конечно, оттуда вы настраиваете свой контроллер. Если вы делаете что-то очень простое, например, сохраняете переменную в поле базы данных, «может быть» приемлемо просто записать сохранение в контроллере. Делая все правильно, однако вы хотели бы использовать свой контроллер для вызова файла модели, который затем будет иметь команду для сохранения переменной в базе данных... и добро пожаловать на землю mvc.
Круто, в данный момент мне нужно идти, но когда я снова войду в систему, я поработаю над этим и обязательно дам вам ответ, если смогу понять это. Спасибо!
Итак, когда я передаю запрос ajax на страницу модели для вставки, это будет переменная, измененная javascript? Я собираюсь попробовать это сейчас. Этот ответ, который вы опубликовали, настолько отличается от моей проблемы, что это немного сбивает с толку, но я думаю, что понимаю, что вы имеете в виду, и попробую это сейчас.
извините, это был просто самый удобный пример, который у меня был, извините, если он слишком сложный. Но суть в том, что вы настраиваете контроллер для получения данных из вашего javascript, передаете эти данные из контроллера в модель, а затем сохраняете переменную в базе данных в своей модели. Если вам удалось вернуть true, иначе верните false;
Без проблем! Я ценю помощь. Я решил использовать другой подход, который требует немного больше предварительной работы, но позже будет лучше. Это не столько проблема ajax, сколько то, как устроена база данных wordpress.
Судя по вашим комментариям, вы понимаете, почему ваш код не работает, но я все равно собираюсь решить эту проблему. PHP не знает, что происходит после того, как его вывод будет отправлен клиенту. Он не может видеть ничего, что происходит с DOM. Эта строка, которая изменяет innerHTML на «привет, парень», выполняется на клиенте и не влияет на работу PHP-скрипта. Javascript может видеть DOM, но ему необходимо передать эту информацию какому-то PHP-скрипту, поскольку PHP отвечает за взаимодействие с базой данных.
Решение, которое вы, вероятно, ищете, - это AJAX. Чтобы PHP знал, что происходит на стороне клиента, вам нужно вернуть эту информацию обратно. Вы можете просто использовать html-форму и опубликовать редактирование в PHP-скрипте, но мне кажется, что вы не хотите, чтобы пользователь покидал/перезагружал страницу. Настройте какой-нибудь обработчик событий, чтобы он ждал, пока пользователь изменит поле или любой другой элемент, о котором идет речь. Затем сделайте запрос через AJAX, который отправляет редактирование с помощью POST или GET. Затем ваш PHP-скрипт может вставить/обновить запись в вашей базе данных. Вот статья MDN о начале работы с AJAX. Кроме того, вот немного Javascript, чтобы дать вам представление о том, как может выглядеть ваше решение:
var fields = document.getElementsByClassName('updatable');
function send(event){
if (event.type === 'blur' || event.keyCode === 13){
xhr = new XMLHttpRequest();
xhr.open('POST', 'path/to/php/script.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
alert('data pushed to server');
}
else if (xhr.status !== 200) {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send(encodeURI('field=' + event.target.id + '&value=' + event.target.value));
}
}
for(var i = 0; i < fields.length; i++){
fields[i].onkeypress = send;
fields[i].onblur = send;
}
Этот сценарий предполагает, что все поля, в которые вы хотите передать значения через AJAX, имеют обновляемый класс, а столбец базы данных, которому он соответствует, является идентификатором. Тогда ваш PHP-скрипт должен иметь возможность получать данные из $_POST. По крайней мере, для начала этого должно хватить.
здорово, я ценю помощь! Да, я понимаю, что проблема в клиенте и сервере, но я просто пытаюсь понять, как к этому подойти. Я думаю, проблема в том, что мне нужно изменить определенные элементы длинного текстового поля (это html-страница), но оставить другие элементы такими, какие они есть. Ajax подходит для этого? Я работаю над этим сейчас, так что скоро узнаю
У меня было ощущение, что вы поняли разницу между клиентом и сервером, но я решил, что лучше все же пройтись по ней на случай, если кто-то наткнется на этот вопрос позже. Трудно сказать, не видя хотя бы макет того, что вы собираетесь делать, но я думаю, что, возможно, вам нужна комбинация AJAX и контентредактируемый. Вот немного демо того, как это могло бы выглядеть.
Ух ты, круто. Обновляемый класс. Я собираюсь изучить это. Да, проблема очень запутанная из-за того, как настроена база данных WordPress, но вы были действительно полезны, и я дам вам ответ. В конце концов я выясню это, но да, я думаю, что ответ лежит в ajax и, возможно, теперь в этом обновляемом классе. Спасибо!
Еще один вопрос. Любая идея, почему переменная сообщения ajax, подобная этой, var = "<php echo "<p>Hello world</p>"; будет работать, но не var = "<p id='demo'>Hello world</p>"; Я пытаюсь сделать ajax-сообщение на другую страницу с этой переменной, и она работает без идентификатора в коде, но нет ли там элемента id?
это contenteditable = "true" делает его редактируемым. Обновляемый класс предназначен только для стилизации и для получения всех полей с помощью javascript. Не уверен, в чем твоя проблема. Как вы пытаетесь опубликовать это?
Не бери в голову. Я решил пойти другим путем, который требует немного больше работы, но будет работать лучше. Спасибо еще раз!
Без проблем! Любое время!
Просто чтобы убедиться, что я понимаю, вы привязываете
$varк своему вызовуbind_param, но ожидаете, что это будет значение из$newVar?