javascript - 如何使用 JavaScript 运行 MySQL 查询

Question

我想在不重新加载页面的情况下运行 MySQL 查询。我认为 JavaScript 可以做到这一点，但我不确定如何。我想要做的是有一个带有返回 id 字段的表格，当你用返回 id 填写一次表格并稍后返回并使用该返回 id 时，它会为他们填写很多内容以节省时间.

Answer 1

Javascript 本身不能运行 MySQL 查询；但是，您可以使用ajax调用服务器来检索数据。我喜欢使用 jQuery 的ajax()来满足我的 ajax 需求。

以下是 jquery 的 ajax() 方法如何工作的示例：

$.ajax({
  url: "pathToServerFile",
  type: "POST",
  data: yourParams,
  dataType: "json"
});

Answer 2

您无法使用纯 JavaScript 进行查询。它必须通过在后端设置的钩子来完成。

这往往是用 ajax 来完成的。

此外，如果可以从客户端进行查询，那么每个人都可以看到您的连接字符串。

Answer 3

您需要有一个后端脚本来执行查询 - JavaScript，作为一种完全客户端语言，对您的 MySQL 服务器发生的事情没有发言权。

您需要做的是通过 AJAX 将查询中所需的参数传递给您使用的任何服务器端语言，并让脚本根据需要创建和处理查询。

不要在 javascript 中创建查询并将其传递给服务器 - 这是非常不安全的，因为它允许任何人运行他们想要的任何查询。

Answer 4

使用 ajax 就可以完成这项工作。但是您仍然需要一种服务器端语言来调用 ajax。将 jquery 与 ajax 一起使用会更快！

$.ajax({
  type: "POST",
  url: "someserversidelangfile",
  data: "" //pass data through this variable
}).done(function( msg ) {
  //do so
});

Answer 5

每个人都在关注ajax，所以这里有一个关于如何使用 vanilla JavaScript 发送数据并取回响应的示例。这将是一个无意义的示例，将使用非 PDO MySQL 连接。后端是 PHP，但 script.js 文件实际上与 NODE.js 后端相同。

脚本.js

/* mode options are cors, no-cors (only send, no response) and same-origin */
fetch('not-ajax.php', {
  method: 'post',
  mode: 'same-origin',
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json',  // sent request
    'Accept':       'application/json'   // expected data sent back
  },
  body: JSON.stringify({
    /**
     * FYI: For this particular case you would actually prefer to have this snippet
     * just before ending </body> tag so it get's actual width of the window minus
     * the width of the scrollbar if there is one. If you use it in an external
     * script it's the same as using window.innerWidth and window.innerHeight.
     **/
    'screen_width': document.documentElement.clientWidth,
    'screen_height': document.documentElement.clientHeight
  })
})
/**
 * You need this part as well if you send json-encoded data back from backend.
 **/
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

非ajax.php

<?php
  include 'connection.php';

  $contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
  if ($contentType === "application/json") {

    // Receive the RAW post data.
    $content = trim(file_get_contents("php://input"));
    // $decoded can be used the same as you would use $_POST with ajax
    $decoded = json_decode($content, true);

    /**
     * Sure enough you can use a SELECT statement, get the data from the database,
     * manipulate it to your heart's content, and then send it back to fetch
     * function in JavaScript for further manipulation and usage.
     **/
    $sql =
      "INSERT INTO used_screen_dimensions (
      ) VALUES ( ?, ? )";
    $statement = $connection->prepare($sql);
    /**
     * first parameter is a string with characters
     *   'i' for integer,
     *   'd' for double,
     *   's' for string,
     *   'b' for blob
     * in the respective order to all other binded parameters
     **/
    $statement->bind_param('ii', $decoded['screen_width'], $decoded['screen_height']);
    $result = $statement->get_result();
    $statement->close();

    /**
     * You may only echo out one thing, but it doesn't have to be a boolean.
     * You can (and should) echo an object with more info including what error
     * it is.
     **/
    if(! is_array($decoded)) {
      echo 0; //If json_decode failed, the JSON is invalid.
      return;
    } else {
      // Send error back to fetch.
      if (!$result) {
        echo 0; // couldn't insert to database
        return;
      }
      echo 1; // Success
    }
  } else {
    echo 0; // Wrong content type
  }

不知道为什么我去手写这个答案。难免有错误。

Answer 6

JavaScript 无法运行 MySql 命令。您可以将 JQuery 与 Ajax 一起使用。像这样 ：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});