时间戳

首页 > 解决方案 > 如何提交表单并同时执行 javascript

javascript - 如何提交表单并同时执行 javascript

问题描述

作为我上一个问题的后续行动，我遇到了另一个问题。我正在谷歌主页副本上制作一个项目。目的是显示与谷歌相同的搜索结果并将搜索历史存储在数据库中。为了显示结果，我使用了这个 javascript:-

        const q = document.getElementById('form_search');
        const google = 'https://www.google.com/search?q=';
        const site = '';

        function google_search(event) {
        event.preventDefault();
        const url = google + site + '+' + q.value;
        const win = window.open(url, '_self');
        win.focus();
                    }
    
                    document.getElementById("s-btn").addEventListener("click", google_search)

为了创建我的表单，我使用了以下 HTML 代码：-

        <form method="POST" name="form_search" action="form.php">
      
        <input type="text" id="form_search" name="form_search" placeholder="Search Google or type URL">

搜索栏中的术语将使用 post 方法发送到 PHP 文件。我有 2 个按钮。让我们将它们命名为 button1 和 button2。javascript 使用 button1 的id，而 button2 没有 javascript，只是一个提交按钮。

问题是当我使用 button1 进行搜索时，会显示搜索结果，但没有数据添加到我的数据库中。但是当我使用 button2 进行搜索时，没有显示任何结果（显然是因为它没有 js），但搜索词已添加到我的数据库中。如果我在 javascript 中反转id，结果也会反转。我需要帮助以确保当我使用 button1 进行搜索时，它会显示结果并将数据保存在数据库中。如果您需要其他代码，我会提供。请保持您的答案仅限于 javascript、PHP 或 HTML 解决方案。我没有使用 Ajax 和 JQuery 的经验。任何帮助表示赞赏。

标签： javascriptphphtml

解决方案

托尼，因为可用的代码有限，所以请按照您在问题中所说的进行。

这是一个设计模式问题，而不是事件问题。

从 Wikipedia 复制粘贴“软件设计模式是针对软件设计中给定上下文中常见问题的通用、可重用解决方案。它不是可以直接转换为源代码或机器代码的完成设计。相反，它是一个描述或模板，用于如何解决可在许多不同情况下使用的问题。设计模式是程序员在设计应用程序或系统时可以用来解决常见问题的形式化最佳实践。

所以这就是目前的情况；

  1. 表单被提交到特定的 URL，即基于 action 属性
  2. 请求的页面在 php 中获取 Query sting 并让您使用它

然后从那里开始..... 3.要么从数据库中获取结果并返回响应 4.要么将搜索请求放入数据库并返回成功响应

问题陈述

如果它的 3 那么搜索请求不会被添加到数据库中 如果它的 4 那么响应搜索请求的结果不会被返回。

解决方案

您需要将 3 和 4 合并到一个处理块中，并且无论搜索查询如何，都将始终运行。

所以我们的设计模式可以使用 mysql 事务，所以一大堆查询将运行一个操作示例

$db->beginTransaction(); // we tell tell mysql we will multiple queries as single operation 
$db->query('insert query');
$results= $db->query('search query');
$db->commit(); // if we have reached to this end it means all went fine no error etc so we commit which will make database record insert query into database. If there were errors then mysql wont record data.

if($results) {echo $results;} else {echo 'opps no result found';}

稍微安全一点的版本

try {
    $db->beginTransaction(); // we tell tell mysql we will multiple queries as single operation 
    $db->query('insert query');
    $results= $db->query('search query');
    $db->commit(); // if we have reached to this end it means all went fine no error etc so we commit which will make database record insert query into database. If there were errors then mysql wont record data.

if($results) {echo $results;} else {echo 'opps no result found';}
} catch (\Throwable $e) {
    // An exception has been thrown must rollback the transaction
    $db->rollback();
    echo 'oho server could not process request';
}

我们有效地将两种查询操作组合成一个始终记录到数据库和始终在数据库中搜索的操作。

推荐阅读