PHP в JavaScript с помощью кнопки «Отправить»
Я работаю над приложением для личного разработчика и столкнулся с некоторыми проблемами. Довольно новый для php и javascript, поэтому помощь приветствуется.
Это простая форма с вход а также заполните кнопка. Как только пользователь введет номер ISBN и нажмет на поиск, ниже должен появиться div, показывающий результаты Google Книг, содержащие заголовок, автора и описание.
То, как я подхожу к этому, заключается в использовании содержимого var $isbn в моем JavaScript Это может быть совершенно неправильный способ сделать это, поэтому я здесь. По сути, я хочу использовать введенный номер ISBN и прикрепить его к концу поиска в Google Книгах (см. Ниже);
var url='https://www.googleapis.com/books/v1/volumes?q='[USER ISBN INPUT HERE];
Если я вручную установлю переменную $ isbn на «0276427343» — я получу результаты книги и успешно посмотрю содержимое div. Только не тогда, когда они публикуются формой в var $ isbn.
Я покажу свой код, как сейчас;
HTML-форма
<form name="form" method="post" action="">
<input name="isbn_search" id="isbn_search" type="text">
<button id="submit" name="submit">search</button>
</form>
PHP
if(isset($_POST['isbn_search'])){
$isbn = $_POST['isbn_search'];
}
JaveScript
$(document).ready(function() {
var isbn = <?php echo $isbn; ?>;
var url='https://www.googleapis.com/books/v1/volumes?q='+isbn;
$('#submit').click(function() {
$.getJSON(url,function(data){
$('.result').empty();
$.each(data.items, function(entryIndex, entry){
var html = '<div class="results well">';
//html += '<h3>' + entry.id + '</h3>';
html += '<h3>' + entry.volumeInfo.title + '</h3>';
html += '<div class="author">' + entry.volumeInfo.authors + '</div>';
html += '<div class="description">' + entry.volumeInfo.description + '</div>';
$('.result').append(html);
});
});
return false;
});
});
Любая помощь и / или предложения приветствуются.
Решение
Я думаю, что в этом случае вам не нужно использовать PHP.
но просто попробуйте это:
<div>
<input id="isbn_search" type="text">
<button onclick="do_search();" id="submit" name="submit">search</button>
</div>
<div class="result"></div><script>
function dosearch(){
var isbn = document.getElementById('isbn_search').value; //$('#isbn_search').val(); : if you like jquery :D
var url='https://www.googleapis.com/books/v1/volumes?q='+isbn;
$.getJSON(url,function(data){
$('.result').empty();
$.each(data.items, function(entryIndex, entry){
var html = '<div class="results well">';
//html += '<h3>' + entry.id + '</h3>';
html += '<h3>' + entry.volumeInfo.title + '</h3>';
html += '<div class="author">' + entry.volumeInfo.authors + '</div>';
html += '<div class="description">' + entry.volumeInfo.description + '</div>';
$('.result').append(html);
});
//here we send this query to database (thanks to AJAX):
//=====================================================
$.ajax({
type: 'POST',
url: './db_insert.php',
data: {'isbn' : isbn },
});
});
}
</script>
если вы хотите сохранить поиск в базе данных,
мы создаем файл php: db_insert.php
<?php
// first : init access to data base :
//====================================
$user="root"; //user of database
$pass=""; //password of database
$db="test"; //name of database
$host = "localhost"; //host name
$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
$bdd = new PDO('mysql:host='.$host.';dbname='.$db, $user, $pass, $pdo_options);
$bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$bdd->query("SET NAMES 'utf8'");//second : insert in a table named "all_search" in this case :
===============================================================
$req = $bdd->prepare('INSERT INTO all_search(isbn, date_in) VALUES(:isbn, :date_in)');
$req->execute(array(
'isbn' => $_POST['isbn'],
'date_in' => date('Y-m-d H:i:s')
));//emm... I think thats all, Enjoy :D
?>
Другие решения
Ваша проблема в том, что форма никогда не отправляется (вы останавливаете ее с помощью JavaScript).
Однако php для этого не нужен, вы можете просто извлечь значение с помощью js:
$(document).ready(function() {
$('#submit').click(function(ev) {
ev.preventDefault();
var isbn = $('#isbn_search').val(); //get isbn direct from input, no need for php
var url='https://www.googleapis.com/books/v1/volumes?q='+isbn;
$.getJSON(url,function(data){
$('.result').empty();
$.each(data.items, function(entryIndex, entry){
var html = '<div class="results well">';
//html += '<h3>' + entry.id + '</h3>';
html += '<h3>' + entry.volumeInfo.title + '</h3>';
html += '<div class="author">' + entry.volumeInfo.authors + '</div>';
html += '<div class="description">' + entry.volumeInfo.description + '</div>';
$('.result').append(html);
});
});
});
});
Вы должны попытаться понять основные понятия javascript и php, прежде чем применять их таким образом.
Похоже, что вы хотите достичь, отправив ISBN, предоставленный клиентом на сервер.
Клиент запускает Javascript (интерпретируется браузером) — сервер запускает php (интерпретируется сервером по запросу)
Основная классическая концепция:
разделите ваш HTML CSS JAVASCRIPT (HTML5) на ваш клиент и позвольте ему делать все, что нужно клиенту
получить ваш PHP, чтобы сделать все вещи на сервере.
Теперь вы можете отправлять информацию на ваш PHP-сервер различными способами — через ajax или с помощью отправки формы с определенным атрибутом действия.
Я надеюсь, что это поможет — вам не нужна помощь с кодом в первую очередь — потратьте несколько (2-3) часов на понимание концепции — затем вернитесь и попытайтесь сделать ваш код правильным 🙂
надеюсь, это поможет
это потому, что вы пытаетесь ввести ISBN пользователем в $ _POST. Где ваш JS основан на нажатии кнопки. Таким образом, вы не можете получить значение поля isbn таким способом.
Измените свой JS ниже.
var isbn = $('#isbn_search').val();
PHP-код не нужен.
if($_POST....
Я не уверен, правильно ли я вас понял, но вы можете вернуть номер ISBN из PHP с помощью json а затем использовать его в своем JavaScript.
<?php
$isbn = $_POST['isbn'];
json_encode($isbn);
?>