使用 MySQL、PHP、AJAX 将值发布到数据库而不使用 jQuery答案

【问题标题】：Post values to database using MySQL, PHP, AJAX without using jQuery使用 MySQL、PHP、AJAX 将值发布到数据库而不使用 jQuery
【发布时间】：2014-04-16 11:33:25
【问题描述】：

这是生成产品展示的页面：

<?php
$q = intval($_GET['q']);

$databaseConnect = $_SERVER['DOCUMENT_ROOT'] . "/637415/globalScripts/sql_connect.php";
include($databaseConnect);

mysqli_select_db($con,"up637415_cms");
$sql="SELECT * FROM products WHERE prod_id = '".$q."'"; 

$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_array($result))
  {
  echo 
 '<div class="prodWrapper">'
 . '<h2>' . '<span id="currentProdId">' . $row['prod_id'] . '</span>' . ' '  .    $row['prod_title'] . '</h2>' . '<form><input type="text" placeholder="Enter New Title" id="newProdTitle"/><input type="button" value="Commit" onclick="productTitleUpdate()"/></form> '
  . '<div class="prodimg">' . 
        '<img src="/637415/cms/images/products/' . $row['prod_img'] . '"'     . ' ' . 'alt="' 
            . $row['prod_title'] . ' ' . 'image' . '">' 
        . '<form class="clearit"><input type="file" value="Select Image" /><input type="submit" value="Upload & change image" /></form> '
  . '</div>' 
 . '<h3>' . 'Product Description:' .  '</h3>' .$row['prod_description'] . 
'<form class="clearit"><textarea class="clearit" rows="4" cols="50"  placeholder="Update product description"></textarea><input type="submit" value="Commit" /></form> '
  . '<p>' . 'Quantity Available:' . $row['prod_quantity'] . '</p>' . '<form><input type="text" placeholder="Enter Quantity" /><input type="submit" value="Commit" /></form> '    .
  '</div>'
  ;
  }

mysqli_close($con);
?>

这是我尝试使用 PHP 将值从 span id="currentProdId" 和“newProdTitle”的输入 id 发布到 MySQL 数据库的 Javascript 文件：

function  productTitleUpdate()
{
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("newProdTitle").innerHTML=xmlhttp.responseText;
 }
}
xmlhttp.open("POST","/637415/admin/scripts/updateProductTitle.php",true);
xmlhttp.send(newProdTitle=document.getElementById("newProdTitle").value);
xmlhttp.send(newProdTitle=document.getElementById("currentProdId").value);
}

这里是 ajax 使用的 PHP 文件：

<?php
$databaseConnect = $_SERVER['DOCUMENT_ROOT'] . "/637415/globalScripts/sql_connect.php";
    include($databaseConnect);
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysqli_select_db($con,"up637415_cms");
$sql="UPDATE products
SET prod_title='(newProdTitle from javascript file) WHERE prod_id=(currentProdId from javascript file)";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo '1 record added' . ' ' . '<a href="/637415/admin/index.php">Go back to admin</a>';

mysql_close($con)
?>

我不确定如何从 javascript 文件中获取值：

SET prod_title='(来自 javascript 文件的 newProdTitle) WHERE prod_id=(来自 javascript 文件的 currentProdId)";

然后替换存储在数据库中的值。它还应该刷新到新值而不刷新页面。我一直在网上搜索如何做到这一点，但感觉有点失落。

任何帮助将不胜感激。谢谢。

【问题讨论】：

+1 让我发笑// code for ... IE5
你为什么不使用 jQuery 或其他一些删除所有千篇一律代码的 AJAX 库？
我想但是在这个作业中，我的老师说我们不能使用 jQuery :/

标签： javascript php html mysql ajax

【解决方案1】：

好的，所以您在 AJAX 请求中使用了 POST 方法，因此要将 JavaScript 值传递给 PHP，然后是 MySQL，您需要将变量值发送到您的 PHP 脚本，这看起来就像您正在做的那样。

通常，您必须对尝试发送的数据进行序列化，如下所示：

var data = 'newProdTitle='+newProdTitle+'&currentProdId='+currentProdId;

所以当它通过网络发送时，它最终看起来像这样：

newProdTitle=blahbalh&currentProdId=8392

您必须通过您的 XmlHttpRequest 将该数据发送到 PHP。有一个example here 说明如何操作。

最后，在 PHP 中，您只需将收到的值引用为 $_POST['newProdTitle'] 和 $_POST['currentProdId']

【讨论】：

【解决方案2】：

xmlhttp.send(newProdTitle=document.getElementById("newProdTitle").value);
xmlhttp.send(newProdTitle=document.getElementById("currentProdId").value);

到这里

var params = "newProdTitle=" + document.getElementById("newProdTitle").value +"&currentProdId=" + document.getElementById("currentProdId").value;
xmlhttp.send(params);

现在从你的 phpscript 中获取价值

您可以直接调用 POST，因为您正在使用 POST

例子

$newProdTitle = $_POST['newProdTitle'];
$currentProdId= $_POST['currentProdId'];

【讨论】：