通过提交按钮将PHP转换为JavaScript

我正在为个人开发者开发一个应用程序，遇到了一些麻烦。对php和javascript来说是相当陌生的，因此非常感谢您的帮助

这是一个带有输入和sumbit按钮的简单表单。一旦用户输入ISBN编号并单击搜索，下面就会出现一个div，显示包含标题、作者和描述的Google Books结果

我实现这一点的方法是在javascript中使用

var$isbn

的内容。这可能是完全错误的方法，这就是我来这里的原因。基本上，我想使用输入的ISBN号码，并将其“附加”到谷歌图书搜索的末尾（见下文）

如果我手动将var$isbn设置为'0276427343'，我确实会收到图书结果并成功查看div内容。只是当它们通过表格发布到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>

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;
    });
});

$（文档）.ready（函数（）{
var-isbn=；
var url='1〕https://www.googleapis.com/books/v1/volumes?q=“+isbn；
$（“#提交”）。单击（函数（）{
$.getJSON（url、函数（数据）{
$（'.result'）.empty（）；
$.each（数据项、函数（entryIndex、条目）{
var html=''；
//html+=''+entry.id+''；
html+=''+entry.volumeInfo.title+''；
html+=''+entry.volumeInfo.authors+''；
html+=''+entry.volumeInfo.description+''；
$（'.result'）.append（html）；
});                        
});
返回false；
});
});

---

欢迎提供任何帮助和/或建议。

您的问题在于表单从未提交（您使用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);
            });                        
        });
    });
});

$（文档）.ready（函数（）{
$（“#提交”）。单击（功能（ev）{
ev.preventDefault（）；
var isbn=$（'#isbn_search'）.val（）；//直接从输入获取isbn，无需php
var url='1〕https://www.googleapis.com/books/v1/volumes?q=“+isbn；
$.getJSON（url、函数（数据）{
$（'.result'）.empty（）；
$.each（数据项、函数（entryIndex、条目）{
var html=''；
//html+=''+entry.id+''；
html+=''+entry.volumeInfo.title+''；
html+=''+entry.volumeInfo.authors+''；
html+=''+entry.volumeInfo.description+''；
$（'.result'）.append（html）；
});                        
});
});
});

您的问题是因为表单从未提交（您使用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);
            });                        
        });
    });
});

$（文档）.ready（函数（）{
$（“#提交”）。单击（功能（ev）{
ev.preventDefault（）；
var isbn=$（'#isbn_search'）.val（）；//直接从输入获取isbn，无需php
var url='1〕https://www.googleapis.com/books/v1/volumes?q=“+isbn；
$.getJSON（url、函数（数据）{
$（'.result'）.empty（）；
$.each（数据项、函数（entryIndex、条目）{
var html=''；
//html+=''+entry.id+''；
html+=''+entry.volumeInfo.title+''；
html+=''+entry.volumeInfo.authors+''；
html+=''+entry.volumeInfo.description+''；
$（'.result'）.append（html）；
});                        
});
});
});

您的问题是因为表单从未提交（您使用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);
            });                        
        });
    });
});

$（文档）.ready（函数（）{
$（“#提交”）。单击（功能（ev）{
ev.preventDefault（）；
var isbn=$（'#isbn_search'）.val（）；//直接从输入获取isbn，无需php
var url='1〕https://www.googleapis.com/books/v1/volumes?q=“+isbn；
$.getJSON（url、函数（数据）{
$（'.result'）.empty（）；
$.each（数据项、函数（entryIndex、条目）{
var html=''；
//html+=''+entry.id+''；
html+=''+entry.volumeInfo.title+''；
html+=''+entry.volumeInfo.authors+''；
html+=''+entry.volumeInfo.description+''；
$（'.result'）.append（html）；
});                        
});
});
});

您的问题是因为表单从未提交（您使用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);
            });                        
        });
    });
});

$（文档）.ready（函数（）{
$（“#提交”）。单击（功能（ev）{
ev.preventDefault（）；
var isbn=$（'#isbn_search'）.val（）；//直接从输入获取isbn，无需php
var url='1〕https://www.googleapis.com/books/v1/volumes?q=“+isbn；
$.getJSON（url、函数（数据）{
$（'.result'）.empty（）；
$.each（数据项、函数（entryIndex、条目）{
var html=''；
//html+=''+entry.id+''；
html+=''+entry.volumeInfo.title+''；
html+=''+entry.volumeInfo.authors+''；
html+=''+entry.volumeInfo.description+''；
$（'.result'）.append（html）；
});                        
});
});
});

这是因为您试图将用户输入的ISBN输入到$\u POST中。你的JS是基于按钮点击的。所以你不能通过这种方式得到isbn字段值

将你的JS改为下面的

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

PHP代码是不需要的

if($_POST....

---

这是因为您试图将用户输入的ISBN输入到$\u POST中。你的JS是基于按钮点击的。所以你不能通过这种方式得到isbn字段值<

<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

// 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

?>