PHP в JavaScript с помощью кнопки «Отправить»

0

Я работаю над приложением для личного разработчика и столкнулся с некоторыми проблемами. Достаточно новый для php и javascript, поэтому помощь приветствуется.

Это простая форма с кнопкой ввода и sumbit. Как только пользователь вводит номер ISBN и нажимает на поиск, ниже должен отображаться div, показывающий результаты Google Книги, содержащие название, автор и описание.

То, как я приближаюсь к этому, - это использовать содержимое var $isbn в моем javascript. Это может быть полный неправильный способ сделать это, поэтому я здесь. В основном я хочу использовать введенный номер ISBN и "присоединить" это к концу поиска в Google Книгах (см. Ниже);

var url='https://www.googleapis.com/books/v1/volumes?q='[USER ISBN INPUT HERE];

Если я вручную установлю var $ 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;
    });
});

Любая помощь и/или предложения приветствуются.

Теги:
google-books

5 ответов

1
Лучший ответ

Я думаю, в этом случае вам не нужно использовать 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

?>
  • 0
    Это работает, спасибо - можете ли вы объяснить, как сделать следующий шаг и сохранить результаты в БД, как вы предлагаете?
  • 0
    привет @johnny_s я обновляю пост
Показать ещё 1 комментарий
2

Ваша проблема в том, что форма никогда не отправляется (вы останавливаете ее с помощью 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);
            });                        
        });
    });
});
  • 0
    Это работает, спасибо - можете ли вы сказать мне, что я делал не так, пожалуйста?
  • 2
    @johnny_s Конечно, в js вы прикрепляете функцию к событию нажатия кнопок $('#submit').click(function(){... это означает, что функция будет вызываться при нажатии кнопки. Эта функция возвращает false который предотвратит действие по умолчанию (в данном случае отправка формы), поэтому форма никогда не отправляется, поэтому $_POST['isbn_search'] никогда не устанавливается.
Показать ещё 1 комментарий
1

Вы должны попытаться понять основные понятия javascript и php, прежде чем выполнять их так.

Похоже, что вы хотите добиться отправки ISBN, предоставленного клиентом на сервер.

Клиент запускает Javascript (интерпретируется браузером) - сервер запускает php (интерпретируется сервером по запросу)

Базовая классическая концепция: разделите свой HTML CSS JAVASCRIPT (HTML5) на свой клиент и позвольте ему делать все клиентские вещи, чтобы ваш PHP мог делать все содержимое сервера.

Вы можете отправлять информацию на свой скрипт PHP-сервера по-разному - через ajax или с отправкой формы с определенным атрибутом действия

Надеюсь, что это поможет - вам не нужна помощь с кодом в первую очередь - потратьте несколько (2-3) часов на понимание понятий - тогда вернитесь и попытайтесь получить свой код правильно :)

надеюсь, это поможет

0

Я не уверен, насколько правильно понимаю вас, но вы можете вернуть номер ISBN из PHP с помощью json а затем использовать его в своем JavaScript.

<?php
$isbn = $_POST['isbn'];
json_encode($isbn);

?>
  • 0
    как он получит $_POST ?
0

потому что вы пытаетесь получить ISBN, введенный пользователем в $ _POST. Если ваш JS основан на нажатии кнопки. Таким образом, вы не можете получить значение поля isbn таким образом.

Измените свой JS ниже.

var isbn = $('#isbn_search').val();

PHP-код не нужен.

if($_POST....

Ещё вопросы

Сообщество Overcoder
Наверх
Меню