将数据从javascript发送到mysql数据库

IT技术 javascript mysql
2021-03-11 09:00:09

我有这个小点击计数器。我想在 mysql 表中包含每次点击。有人可以帮忙吗？

var count1 = 0;
function countClicks1() {
count1 = count1 + 1;
document.getElementById("p1").innerHTML = count1;
}


document.write('<p>');
document.write('<a href="javascript:countClicks1();">Count</a>');
document.write('</p>');

document.write('<p id="p1">0</p>');

以防万一有人想看看我做了什么：

var count1 = 0;
function countClicks1() {
count1 = count1 + 1;
document.getElementById("p1").innerHTML = count1;
}
function doAjax()
$.ajax({
   type: "POST",
   url: "phpfile.php",
   data: "name=name&location=location",
    success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });
}

document.write('</p>');
document.write('<a href="javascript:countClicks1(); doAjax();">Count</a>');
document.write('</p>');
document.write('<p id="p1">0</p>');

这是 phpfile.php 用于测试目的将数据写入 txt 文件

<?php
$name = $_POST['name'];
$location = $_POST['location'];
$myFile = "test.txt";
$fh = fopen($myFile, 'w') or die("can't open file");
fwrite($fh, $name);
fwrite($fh, $location);
fclose($fh);
?>
3个回答

JavaScript，如您的问题中所定义，不能直接与 MySql 一起使用。这是因为它不在同一台计算机上运行。

JavaScript 运行在客户端（在浏览器中），数据库通常存在于服务器端。您可能需要使用中间服务器端语言（如 PHP、Java、.Net 或服务器端 JavaScript 堆栈如 Node.js）来执行查询。

这是一个关于如何编写一些将 PHP、JavaScript 和 MySql 绑定在一起的代码的教程，代码在浏览器和服务器上运行：

http://www.w3schools.com/php/php_ajax_database.asp

这是该页面的代码。它与您的场景并不完全匹配（它执行查询，并且不在数据库中存储数据），但它可能会帮助您开始了解您需要的交互类型，以便完成这项工作。

特别要注意那篇文章中的这些代码。

一些 Javascript：

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();

PHP代码位：

mysql_select_db("ajax_demo", $con);
$result = mysql_query($sql);
// ...
$row = mysql_fetch_array($result)
mysql_close($con);

此外，在您了解此类代码的工作原理后，我建议您使用 jQuery JavaScript 库来执行 AJAX 调用。它比内置的 AJAX 支持更简洁、更易于处理，而且您不必编写特定于浏览器的代码，因为 jQuery 具有内置的跨浏览器支持。这是 jQuery AJAX API 文档的页面。

文章中的代码

HTML/Javascript 代码：

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

PHP代码：

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>
@victor - 编辑答案的人：我复制/粘贴了 w3schools 文章中的代码。当您对代码进行编辑时，它不再是相同的代码，因此说“文章中的代码”是没有意义的。我建议您在编辑之前编辑我引用的来源，或者添加您自己的答案，或者更改该部分的标题，使其不再说它来自文章。
2021-04-21 09:00:09
@Victor 不用打扰，我只是认为结果不太正确。我认为您的代码编辑（可能）很好。我没有完全了解它们。我只是认为您也应该更改该部分，因此很明显您已经对其进行了改进，而不仅仅是复制/粘贴它。就像不是“文章中的代码”一样，将其重命名为“代码示例（改编自上面链接的文章）”。或者您可以更新它以匹配源文章（乍一看，它看起来对我来说没有改变，但现在我看到了他们所做的更改）。如果您想继续进行更改，请选择这两件事之一。
2021-05-07 09:00:09
我认为这是最小的问题，因为真正的问题是初学者开发人员会复制粘贴您的代码，认为它很好。无论如何，谢谢你的解释。
2021-05-12 09:00:09
很抱歉打扰你，但我只是想让它变得更好。您的答案有几个赞成票，它被选为接受的答案。这就是为什么我认为推广不良做法（例如脏格式或 SQL 注入和 FPD 漏洞）是一个坏主意。顺便说一下，我在 W3Schools 上查过：他们已经格式化了代码并修复了 SQL 注入漏洞（顺便说一句，FPD 仍然没有修复）。
2021-05-14 09:00:09

您必须以某种方式将此数据提交给服务器。我假设您不希望每次用户单击链接时都重新加载整个页面，因此您必须使用 XHR (AJAX)。如果您不使用 jQuery（或其他一些 JS 库），您可以阅读本教程，了解如何“手动”执行 XHR 请求。

其他海报是正确的，您无法直接从 javascript 连接到 MySQL。这是因为 JavaScript 在客户端，而 mysql 在服务器端。

所以你最好的选择是使用 ajax 调用上面引用的处理程序，如果你能让我们知道你的项目是什么语言，我们可以更好地帮助你，即 php/java/.net

如果您的项目使用的是 php，那么 Merlyn 的示例是一个很好的起点，我个人会使用 jquery.ajax() 来减少您的代码并有更好的机会减少跨浏览器问题。

http://api.jquery.com/jQuery.ajax/

其它你可能感兴趣的问题
上一篇理解 JS Promise 下一篇什么是好的 Javascript 调试工具？