Question

嗨，我是javascript和ajax的新手，我读到了将javascript（客户端）变量转换为php（服务器端）变量，我们必须通过AJAX传递。请有人使用AJAX提供相同的代码。在这里我使用了不好的方法，但我只是发布这个代码来显示我的目标是什么：当用户从select标签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谢谢

Answer 1

有很多方法可以做到这一点，但这里有一个简单的代码可以提供帮助。我从一本名为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>

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

1 个答案: