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

Question

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

这是一个简单的表单，带有输入和提交按钮。用户输入 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;
    });
});

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

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