如何使用 Ajax 执行相同的功能


How can i do the same function using Ajax

嗨,拜托我是javascript和ajax的新手,我读到要将javascript(客户端)变量转换为php(服务器端)变量,我们必须通过AJAX传递。请有人可以使用 AJAX 给出相同的代码。在这里我使用了错误的方法,但我只是发布此代码来显示我的目标是什么:当用户从选择标签 HTML 中选择 id 时,我希望其他信息出现在输入标签(键入文本)中,以便他可以修改信息这是我的源代码:

 <script type="text/javascript">
        document.getElementById('id').onchange = function(){
        var identifiant = document.getElementById('id').value;
        <?php  
        $phpvar='"+identifiant+"'; 
        $sql="select * from inscrits where id=".$phpvar;
        $res=mysql_query($sql) or die ('Unable to run query:'.mysql_error());
        $ligne=mysql_fetch_array($res);

        ?>
        //document.getElementById('nom').value ="<?php echo $phpvar;?>";
        document.getElementById('nom').value = "<?php echo $ligne['nom'] ?>";
        document.getElementById('prenom').value = "<?php echo $ligne['prenom'] ?>";
        document.getElementById('profession').value = "<?php echo $ligne['profession'] ?>";
        document.getElementById('etablissement').value = "<?php echo $ligne['etablissement'] ?>";
        document.getElementById('telephone').value = "<?php echo $ligne['telephone'] ?>";
        document.getElementById('email').value = "<?php echo $ligne['email'] ?>";
        document.getElementById('acceptation').value = "<?php echo $ligne['acceptation'] ?>";
        }

</script>

请欣赏我的情况,我是javascript编程的新手,我刚刚开始如果可以向我发布我可以在同一页面中使用的代码.php谢谢

有很多

方法可以做到这一点,但这里有一个简单的代码可以提供帮助。 我从一本名为 Ajax in a Nutshell 的旧书中获得了代码,但为您修改了它,

创建一个 php 文件 lookupCustomer.php 并在其中添加您的 php 代码,并对 i 进行额外的更改,

<?php  
        $phpvar = 'id';
        $sql="select * from inscrits where id=".$phpvar;
        $res=mysql_query($sql) or die ('Unable to run query:'.mysql_error());
        $ligne=mysql_fetch_array($res);
         print_r(json_encode($ligne));
        ?>

以下是您调用 php 脚本并更新表单的方式,同样,这只是执行此逻辑的简化方法,

<html> 
 <head>
  <title>EXAMPLE</title>
  <script language="javascript" type="text/javascript">
  var xmlObj = (typeof window.ActiveXObject != 'undefined')
  ? new ActiveXObject("Microsoft.XMLHTTP")
  : new XMLHttpRequest();
  if (xmlObj == null)
     alert("Error creating request object!");
   function getCustomerInfo() 
   {
     var id = document.getElementById("id").value;
     var url = "lookupCustomer.php?id="+ escape(id);
     xmlObj.open("GET", url, true);
     xmlObj.onreadystatechange = updatePage;
     xmlObj.send(null);
     //* using POST instead of GET, use this code
     //var url = "lookupCustomer.php";
     //var req = "id="+ escape(id);
     //req = req + "?dummy=" + new Date().getTime();
     //document.getElementById("order").value = url;
     //xmlObj.open("POST", url, true);
     //xmlObj.onreadystatechange = updatePage;
     //xmlObj.send(null);
   }
   function updatePage() 
   {
     alert(xmlObj.readyState+" "+xmlObj.status);
     if (xmlObj.readyState == 4) 
     {
       if (xmlObj.status == 200) 
       {
         /* Get the response from the server */
         var customerAddress = xmlObj.responseText;
         /* Update the HTML web form */
        var linqne = JSON.parse(this.responseText); 
        document.getElementById('nom').value           =  linqne.nom;
        document.getElementById('prenom').value        =  linqne.prenom;
        document.getElementById('profession').value    =  linqne.profession;
        document.getElementById('etablissement').value =  linqne.etablissement;
        document.getElementById('telephone').value     =  linqne.telephone;
        document.getElementById('email').value         =  linqne.email;
        document.getElementById('acceptation').value   =  linqne.acceptation;
       }
       else
       {
         var customerAddress = xmlObj.responseText;
        alert("Server return status error = "+xmlObj.status);
       }
     }
   }
  </script>
 </head>
 <body onLoad="document.forms[0].reset();">
  <p><img src="breakneck-logo.gif" alt="Break Neck Pizza" /></p>
  <form method="POST" action="lookupCustomer.php">
   <p>Enter your id number:
    <input type="text" size="14" name="id" id="id" onBlur="getCustomerInfo()" />
    <input type="text" size="20" name="nom" id="nom" />
    <input type="text" size="20" name="prenom" id="prenom" />
    <input type="text" size="20" name="profession" id="profession" />
    <input type="text" size="20" name="etablissement" id="etablissement" />
    <input type="text" size="20" name="telephone" id="telephone" />
    <input type="text" size="20" name="email" id="email" />
    <input type="text" size="20" name="acceptation" id="acceptation" />
   </p>
  </form>
 </body>
</html>