使用 jQuery/Javascript 在 Mysql 中保存搜索结果答案

【问题标题】：Saving a search result in Mysql with jQuery/Javascript使用 jQuery/Javascript 在 Mysql 中保存搜索结果
【发布时间】：2019-05-13 07:00:16
【问题描述】：

我正在尝试将 google 的 API 搜索结果保存在 localhost 的 Mysql 数据库中。

我的问题

我正在使用for 循环来显示书籍研究的所有可能结果，例如“哈利波特”。
我使用 AJAX 执行此操作，然后循环结果。
主要问题是，如果我想保存其中一个结果，保存的只是最后一个结果，因为每个变量在每个循环中都会覆盖。

这是代码，saveBook.php 只是一个 .php 文件，我在其中插入查询。

$.ajax({
        url:"https://www.googleapis.com/books/v1/volumes?q=" + search,
        dataType: "json",
        type: 'GET',
        success: function(data){

            for(i=0;  i < data.items.length; i++)
            {


               title = $( '<p> ' + data.items[i].volumeInfo.title + '</p>');
               author = $('<p> ' + data.items[i].volumeInfo.authors + '</p>');
               img = $('<img><a href=' + data.items[i].volumeInfo.infoLink + 
                       '><br></br><button>Read More</button></a>' );
               url= data.items[i].volumeInfo.imageLinks.thumbnail;
               save = $('<br><button onclick="save()">Save</button></br> 
                        </br>');


          img.attr('src',url);
          title.appendTo("#result");
          author.appendTo("#result");
          img.appendTo("#result");
          save.appendTo("#result");

        }  
    },

    });
    } 
    }

    function save(){
        $.ajax({


            type:'POST',
            data: {
                            url: url,
                            title: title,
                            author: author,
                        }, 
                        url: "saveBook.php",
                        success: function(data){
                            alert("Success!");
                            location.replace("home.php");

            }
    })}

另一个问题是：

我应该如何使用这个 JSON

data: {
          url: url,
          title: title,
          author: author,
      },

实际返回一个带有标题和作者的字符串，因为 url 已正确保存。

【问题讨论】：

JavaScript closure inside loops – simple practical example的可能重复
为什么不构建每个save() 调用以包含您打算发布的参数？否则将数据项数组存储为全局可访问的，并像save(i) 一样传递i。可能至少有 5 种不同的方式来执行此任务。另外，你应该使用 css 来定位你的元素，而不是用一堆 <br> 标签来膨胀 dom。
您好，谢谢您的回答。我试图将 i 传递给 save()，但是，当我这样做时，它表示该变量已声明但从未读取。如果它有助于理解问题，那么第一个 AJAX 调用（将标题、作者等附加到#result 的那个）位于 if-else 中，因为我想检查用户是否输入了一个空字符串并单击了按钮。
您是否将let data={}, 声明为全局变量（在您的ajax 调用之外/之前？）如果您希望我收到您的消息通知，您必须使用@mickmackusa ping 我。如果您在save() 之后重新加载页面，为什么不定期提交表单并使用 php 重定向？
不，我只声明了 url、img、title、author 和 save as var 作为全局变量。我目前只从 AJAX 函数中获取数据。 @mickmackusa 老实说，我不知道该怎么做。我应该在我的 html 中放置一个提交而不是按钮吗？

标签： javascript php jquery

【解决方案1】：

我有时间考虑您的项目。虽然我不确定您的所有项目要求，但基本追求应该是尽量减少对 api 的调用。出于这个原因，让您的用户通过标准（非 ajax）搜索输入/表单进行搜索，并使用 php 将 api 结果加载到 html 中，然后使用您的 ajax 调用允许从单个搜索结果加载中进行多次保存调用（如果这对您的项目有意义）。基本上，我想我不鼓励在保存单个项目后自动重新加载；否则你可以再次避免ajax。

此外，据我所知，authors 是一个数组，因此您需要将这些值加入/分解为单个字符串。

foreach (json_decode($apijson, true) as $item) {
    echo '<div class="book">';
        // your other elements in the row
        echo "<button onclick=\"save('" , 
            htmlspecialchars($item['id'], ENT_QUOTES, 'UTF-8') , "','" ,
            htmlspecialchars($item['volumeInfo']['title'], ENT_QUOTES, 'UTF-8') , "','" ,
            htmlspecialchars(implode(', ', $item['volumeInfo']['authors']), ENT_QUOTES, 'UTF-8') , "','" ,
            htmlspecialchars($item['volumeInfo']['imageLinks']['thumbnail'], ENT_QUOTES, 'UTF-8') , "');\">Save</button>";
    echo '</div>';
}

然后这些参数可以直接输入到你的 ajax 函数中。

确保验证并使用合理的数据清理技术，并在插入时使用准备好的语句。

您可以从 ajax 返回成功消息，然后hide() 保存的行/书。

如果插入没有产生“受影响的行”，您可以返回一个模糊（不准确）的错误消息。

【讨论】：

【解决方案2】：

感谢@mickmackusa，问题得以解决。我已将变量“save”声明为全局数组，然后，我通过适当的转义传递了每个字符串。现在它工作正常！非常感谢。

save[i] = $('<button onclick="save((\'' + data.items[i].volumeInfo.authors + '\'),(\'' + data.items[i].volumeInfo.title + '\'),(\'' + data.items[i].volumeInfo.infoLink + '\'))">Save</button><br><br>')

【讨论】：