通过提交按钮 PHP 到 JavaScript答案

【问题标题】：PHP to JavaScript via Submit Button通过提交按钮 PHP 到 JavaScript
【发布时间】：2014-11-11 12:08:20
【问题描述】：

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

这是一个带有 input 和 sumbit 按钮的简单表单。用户输入 ISBN 编号并点击搜索后，下方会出现一个 div，显示包含标题、作者和说明的 Google 图书结果。

我解决这个问题的方法是在我的 javascript 中使用 var $isbn 的内容。这可能是完全错误的方法，这就是我在这里的原因。基本上我想使用输入的 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;
    });
});

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

【问题讨论】：

标签： javascript php google-books

【解决方案1】：

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

【讨论】：

这行得通，谢谢 - 你能告诉我我做错了什么吗？
@johnny_s 当然，在 js 中，您将函数附加到按钮单击事件 $('#submit').click(function(){... 这意味着单击按钮时将调用该函数。此函数返回false，这将阻止默认操作（在本例中为提交表单）发生。所以表单永远不会提交，所以$_POST['isbn_search']永远不会被设置。
这行得通，因为他添加了 (1): ev.preventDefault();谁阻止提交表单。 (2) 我们在函数 click 内获得 isbn_search 的值，这意味着我们点击的位置，在您的第一个代码中，这是在外面。 :)

【解决方案2】：

我认为在这种情况下你不需要使用 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

?>

【讨论】：

这行得通，谢谢 - 您能解释一下如何更进一步并按照您的建议将结果保存到数据库中吗？

【解决方案3】：

在像这样实现它们之前，您应该尝试了解 javascript 和 php 的基本概念。

看起来您想要实现的是将客户端提供的 ISBN 发送到服务器。

客户端运行Javascript（由浏览器解释）-服务器运行php（请求时由服务器解释）

一个基本的经典概念：将您的 HTML CSS JAVASCRIPT (HTML5) 拆分到您的客户端，并让它完成所有客户端的工作让你的 PHP 做所有的服务器工作。

您现在可以通过不同的方式将信息发送到您的 PHP 服务器脚本 - 通过 ajax 或使用已定义的操作属性提交表单

我希望这会有所帮助 - 首先您不需要代码方面的帮助 - 花一些 (2-3) 小时来理解这些概念 - 然后回来尝试让您的代码正确 :)

希望对你有帮助

【讨论】：

【解决方案4】：

这是因为您试图将用户输入的 ISBN 输入 $_POST。您的 JS 基于按钮单击的位置。所以无法通过这种方式获取isbn字段值。

把你的 JS 改成下面。

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

不需要PHP代码。

if($_POST....

【讨论】：

【解决方案5】：

我不确定我的理解是否正确，但您可以使用json 从 PHP 返回 ISBN 号，然后在您的 JavaScript 中使用它。

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

?>

【讨论】：

他怎么会得到$_POST？