Php 基于选定值获取特定字段数据的Html表单

我有一个包含3个字段的html表单（person.html）：

名字

电子邮件

接触

我还有一个MySQL表

Engineer

，包含关于相同字段的所有详细信息

我需要的是，当用户插入/选择姓名并按下go按钮时，其他字段（EmailID和Contact）将自动从DB接收数据并完成表单

My file person.html包含以下代码：-

<form name="form1" style="margin:0px">
   <input name="formtext1" type="text" width:200px;left:140px;top:120px;z-index:2">
   <input name="formbutton1" type="submit" value="GO" left:140px;top:140px;z-index:3">
   <input name="formtext2" type="text" width:200px;left:140px;top:180px;z-index:5">
   <input name="formtext3" type="text" width:200px;left:140px;top:240px;z-index:7">
</form>
<div id="text1" left:60px; top:120px; width:41px; height:20px; z-index:1">
  <div class="wpmd">
    <div>Name</div>
  </div>
</div>
<div id="text2" left:60px; top:180px; width:52px; height:27px; z-index:4">
   <div class="wpmd">
      <div>Email</div>
   </div>
</div>
<div id="text3" left:60px; top:240px; width:47px; height:18px; z-index:6">
   <div class="wpmd">
      <div>Contact</div>
   </div>
</div>

给你

这是表单的修改版本，用于让您开始了解方法和结果。 只需运行此表单，查看回复如何返回并填写表单，然后您就可以调整它

这保存在一个名为“ajax\u getting\u specific.php”的文件中。ajax向自身发出请求

<?php
$formtext = isset($_POST['formtext'])? $_POST['formtext'] : null;
if (!empty($formtext) ){

       /* When you understand how it works, use this kind of sql to get
        * the data and show it back to the request. */

       /*
         $sql = "SELECT name,email,contact FROM datatable WHERE Name = '$formtext'";   
         $result = mysqli_query($db_conx, $sql);
         if (mysqli_num_rows($result) === 1){    
            $data = mysqli_fetch_assoc($result);
            echo $data['name'] . ":" . $data['Email'] .":". $data['Contact'];
         } else {
            echo "failed";  
         }
       */

    /* This is just temporarily sending a sample response.*/
    if($formtext !== null){
        die("$formtext:$formtext@example.com:123456789");
    } else {
        die("failed");
    }
} 

?>

<script type='text/javascript'>
function getAjaxRequest() {
    var username = document.getElementById('formtext1').value;

    /* request to itself */     
    var ajax = ajaxObj('POST', 'ajax_getting_specific.php'); 

    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if(ajax.responseText != 'failed'){

                // This part is populating the fields based on what came back

                var fields = ajax.responseText.split(":");
                alert (fields[0] + " - " + fields[1] + " - " + fields[2]);
                document.getElementById('ajax-response').innerHTML =  ajax.responseText;
                document.getElementById('formtext2').value = fields[1];
                document.getElementById('formtext3').value = fields[2];

                document.getElementById('name-display').innerHTML = fields[0];
                document.getElementById('email-display').innerHTML = fields[1];
                document.getElementById('contact-display').innerHTML = fields[2];

            } else {
                document.getElementById('ajax-response').innerHTML =  "AJAX FAILED";
            }
        }
    }
    ajax.send('formtext=' + username);
}

function ajaxObj( meth, url ) {
    var x = new XMLHttpRequest();
    x.open( meth, url, true );
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return x;
}

function ajaxReturn(x){
    if(x.readyState == 4 && x.status == 200){
        return true;    
    }
}

</script>

Fetching fields from table based on the first entry
<br>
<div id='ajax-response'>AJAX response will appear here</div>
<br><br>

 <input id="formtext1" name="formtext1" type="text" style="width:200px;left:140px;top:120px;z-index:2">
 <button name="formbutton1" 
    onclick="getAjaxRequest()" value="GO" style="left:140px;top:140px;z-index:3">GO</button>
<form name="form1" style="margin:0px">
 <input id="formtext2" name="formtext2" type="text" style="width:200px;left:140px;top:180px;z-index:5">
 <input id="formtext3" name="formtext3" type="text" style="width:200px;left:140px;top:240px;z-index:7">
 </form>
 <div id="text1">
    <div class="wpmd">
        <div>Name: <span id="name-display" style="z-index:1"></span></div>
    </div>
</div>
 <div id="text2">
 <div class="wpmd">
 <div>Email: <span id="email-display"></span></div>
 </div></div>
 <div id="text3">
 <div class="wpmd">
 <div>Contact: <span id="contact-display"></span></div>
 </div></div>

函数getAjaxRequest（）{
var username=document.getElementById（'formtext1'）。值；
/*向自己提出请求*/
var ajax=ajaxObj（'POST'，'ajax_get_specific.php'）；
ajax.onreadystatechange=函数（）{
if（ajaxReturn（ajax）=true）{
if（ajax.responseText！=“失败”）{
//这部分将根据返回的内容填充字段
var fields=ajax.responseText.split（“：”）；
警报（字段[0]+“-”+字段[1]+“-”+字段[2]）；
document.getElementById（'ajax-response'）。innerHTML=ajax.responseText；
document.getElementById（'formtext2'）。值=字段[1]；
document.getElementById（'formtext3'）。值=字段[2]；
document.getElementById（'name-display'）。innerHTML=字段[0]；
document.getElementById（'email-display'）。innerHTML=字段[1]；
document.getElementById（'contact-display'）.innerHTML=fields[2]；
}否则{
document.getElementById（'ajax-response'）.innerHTML=“ajax失败”；
}
}
}
send（'formtext='+用户名）；
}
函数ajaxObj（meth，url）{
var x=新的XMLHttpRequest（）；
x、 打开（meth、url、true）；
x、 setRequestHeader（“内容类型”、“应用程序/x-www-form-urlencoded”）；
返回x；
}
函数ajaxReturn（x）{
如果（x.readyState==4&&x.status==200）{
返回true；
}
}
基于第一个条目从表中获取字段


AJAX响应将出现在这里



去
姓名：
电邮：
联系人：

您试过PHP吗？1。向php页面发出ajax请求。2返回数据的JSON表示形式。3.提取并呈现所需的信息。是的，与前面的注释一样，最好是发出一个ajax请求，传入查询数据并以JSON的形式返回结果，然后用响应中的信息填充所需的字段。。。

<?php
$formtext = isset($_POST['formtext'])? $_POST['formtext'] : null;
if (!empty($formtext) ){

       /* When you understand how it works, use this kind of sql to get
        * the data and show it back to the request. */

       /*
         $sql = "SELECT name,email,contact FROM datatable WHERE Name = '$formtext'";   
         $result = mysqli_query($db_conx, $sql);
         if (mysqli_num_rows($result) === 1){    
            $data = mysqli_fetch_assoc($result);
            echo $data['name'] . ":" . $data['Email'] .":". $data['Contact'];
         } else {
            echo "failed";  
         }
       */

    /* This is just temporarily sending a sample response.*/
    if($formtext !== null){
        die("$formtext:$formtext@example.com:123456789");
    } else {
        die("failed");
    }
} 

?>

<script type='text/javascript'>
function getAjaxRequest() {
    var username = document.getElementById('formtext1').value;

    /* request to itself */     
    var ajax = ajaxObj('POST', 'ajax_getting_specific.php'); 

    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if(ajax.responseText != 'failed'){

                // This part is populating the fields based on what came back

                var fields = ajax.responseText.split(":");
                alert (fields[0] + " - " + fields[1] + " - " + fields[2]);
                document.getElementById('ajax-response').innerHTML =  ajax.responseText;
                document.getElementById('formtext2').value = fields[1];
                document.getElementById('formtext3').value = fields[2];

                document.getElementById('name-display').innerHTML = fields[0];
                document.getElementById('email-display').innerHTML = fields[1];
                document.getElementById('contact-display').innerHTML = fields[2];

            } else {
                document.getElementById('ajax-response').innerHTML =  "AJAX FAILED";
            }
        }
    }
    ajax.send('formtext=' + username);
}

function ajaxObj( meth, url ) {
    var x = new XMLHttpRequest();
    x.open( meth, url, true );
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return x;
}

function ajaxReturn(x){
    if(x.readyState == 4 && x.status == 200){
        return true;    
    }
}

</script>

Fetching fields from table based on the first entry
<br>
<div id='ajax-response'>AJAX response will appear here</div>
<br><br>

 <input id="formtext1" name="formtext1" type="text" style="width:200px;left:140px;top:120px;z-index:2">
 <button name="formbutton1" 
    onclick="getAjaxRequest()" value="GO" style="left:140px;top:140px;z-index:3">GO</button>
<form name="form1" style="margin:0px">
 <input id="formtext2" name="formtext2" type="text" style="width:200px;left:140px;top:180px;z-index:5">
 <input id="formtext3" name="formtext3" type="text" style="width:200px;left:140px;top:240px;z-index:7">
 </form>
 <div id="text1">
    <div class="wpmd">
        <div>Name: <span id="name-display" style="z-index:1"></span></div>
    </div>
</div>
 <div id="text2">
 <div class="wpmd">
 <div>Email: <span id="email-display"></span></div>
 </div></div>
 <div id="text3">
 <div class="wpmd">
 <div>Contact: <span id="contact-display"></span></div>
 </div></div>