Question

我是初学者，我正在尝试学习如何使用PHP和Ajax添加，删除，检索和更新数据库。

此时我已经完成了如何检索和删除，所以我试图更新一些值。为了检索数据，我只传递我想要的所选ID，这样我就可以检索数据。同样适用于删除，我只是指定要删除的ID。现在要更新还有更多的事情发生，我无法找到解决方案。

这是我的表格：

<form onsubmit="updateuser()">

   ID Number: <input name="ud_id"><br>
   First Name: <input type="text" name="ud_first"><br>
   Last Name: <input type="text" name="ud_last"><br>

<input type="Submit" value="Update">
</form>

这是我的javascript：

    function updateuser() {
    var str = $('.ud_id').attr('value');

   if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
   }
   xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         document.getElementById("txtuser").innerHTML = xmlhttp.responseText;
      }
   }
   xmlhttp.open("GET", "ajaxupdate.php?q=" + str, true);
   xmlhttp.send();
}

我认为问题出现是因为我的表单ajaxupdate.php文件没有从表单中检索First和Last名称值。这就像我没有通过它们（？）。

这是我的ajaxupdate.php文件：

<?php   include("connection.php");

$id=$_GET['ud_id'];
$first=$_GET['ud_first'];
$last=$_GET['ud_last'];


$query="UPDATE contacts SET first='$first', last='$last' WHERE id='$id'";


mysql_query($query);
mysql_close();
?>

我做错了什么，以便我可以更新特定ID的数据库的第一个和最后一个值？

Answer 1

在您的javascript中，执行此操作

function updateuser() {
    var ud_id = $('input[name="ud_id"]').val();
    var ud_first = $('input[name="ud_first"]').val();
    var ud_last = $('input[name="ud_last"]').val();

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtuser").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "ajaxupdate.php?ud_id=" + ud_id + "&ud_first="+ud_first+"&ud_last="+ud_last, true);
    xmlhttp.send();
}

Answer 2

试试此代码

<script type="text/javascript">
function updateuser() {
    var ud_id = document.getElementById('ud_id').value;
    var ud_first = document.getElementById('ud_first').value;
    var ud_last = document.getElementById('ud_last').value;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtuser").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "ajaxupdate.php?ud_id=" + ud_id + "&ud_first="+ud_first+"&ud_last="+ud_last, true);
    xmlhttp.send();
}
</script>

<强> HTML

<form name="test">

   ID Number: <input name="ud_id"><br>
   First Name: <input type="text" name="ud_first"><br>
   Last Name: <input type="text" name="ud_last"><br>

<input type="button" onClick="updateuser()" value="Update">
</form>

Answer 3

如果要在提交时使用updateuser()功能，则必须阻止表单实际提交。让它返回false，否则表单会在函数有时间执行之前由浏览器提交。

浏览器在提交表单之前运行该功能（这就是提交的工作原理）。如果函数没有返回false，那么它会将其解释为“一切正常，您可以安全地提交表单”。然后表格照常提交。

同时，该函数启动异步请求。但是由于浏览器已经提交了表单，现在你处于一个完全不同的页面上，因此连接和异步请求断开连接并且很可能被忽略（除非在页面被更改之前请求发出，在这种情况下两个请求都已处理完毕。

作为替代方案，您可以执行该功能而无需将其置于提交事件中。请参阅sam_13's answer。

Answer 4

检查一下它是否会按预期工作

    ud_id = document.getElementById('ud_id').value;
    ud_first = document.getElementById('ud_first').value;
    ud_last = document.getElementById('ud_last').value;
    xmlhttp.open("GET", "ajaxupdate.php?ud_id=" + ud_id +"&ud_first=" +ud_first+ "ud_last="+ud_last, true);



<form onsubmit="updateuser()">

   ID Number: <input name="ud_id" id="ud_id"><br>
   First Name: <input type="text" name="ud_first" id="ud_first"><br>
   Last Name: <input type="text" name="ud_last" id="ud_last"><br>

<input type="Submit" value="Update">
</form>

Answer 5

我遇到了这个例子，因为我也遇到了类似的问题。但我无法帮助，但注意到你没有为你的表单指定一个方法，你的AJAX假设它应该使用GET方法。只是值得深思...干杯

Answer 6

此代码已经过测试并且有效。我需要做同样的事情，用ajax更新MySql并将上面的内容与更广泛的研究相结合，我得到了这个工作。 php文件名为ajaxupdate.php：

<html>
<head>
</SCRIPT>
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
function MsgBox (textstring) {
alert (textstring) }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var ud_id = document.getElementById('ud_id').value;
    var ud_first = document.getElementById('ud_first').value;
    var ud_last = document.getElementById('ud_last').value;
    var queryString = "?ud_id=" + ud_id + "&ud_first="+ud_first+"&ud_last="+ud_last;
    ajaxRequest.open("GET", "ajaxupdate.php" + queryString + "&random=" + Math.random(), true);
    ajaxRequest.send(null); 
}
</script>
</head>
<body>
<form method="post" name="test" onsubmit="ajaxFunction()">  
   ID Number: <input id="ud_id" name="ud_id"><br>
   First Name: <input id="ud_first" type="text" name="ud_first"><br>
   Last Name: <input id="ud_last" type="text" name="ud_last"><br> 
<input type="submit"  value="Update">
</form>
</body>
</html>

Html文件名为anyNameYouWish.html：

dictionary = f.read()

MySQL / PHP：使用Ajax更新MySQL

6 个答案: