Php 获取显示在表中的查询结果_Php_Jquery_Ajax

Php 获取显示在表中的查询结果

php jquery ajax

Php 获取显示在表中的查询结果,php,jquery,ajax,Php,Jquery,Ajax,我很难弄清楚如何在表中显示查询结果。html表单有一个下拉菜单，允许选择机构名称。该表应显示属于该机构的人员。当我通过submit按钮执行代码时，来自pgsql的查询结果显示在php页面上。基本上显示Json。我应该在html页面上的表中显示查询结果。我被告知使用ajaxsubmit（），但我不确定如何调整下面的代码。我们将不胜感激。多谢各位 <html> <head> <link rel="stylesheet" href="http://code.jque

我很难弄清楚如何在表中显示查询结果。html表单有一个下拉菜单，允许选择机构名称。该表应显示属于该机构的人员。当我通过submit按钮执行代码时，来自pgsql的查询结果显示在php页面上。基本上显示Json。我应该在html页面上的表中显示查询结果。我被告知使用ajaxsubmit（），但我不确定如何调整下面的代码。我们将不胜感激。多谢各位

<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script> 
$(document).ready(function(){

   //////////////////////////////////////
  // Displays insitution names in Drop Down Menu

        //Getting the selector and running the code when clicked
        $('#selinstit').click(function(e){
                 //Getting the JSON object, after it arrives the code inside
               //function(dataI) is run, dataI is the recieved object
               $.getJSON('http://localhost/listinstitutions.php',function(dataI){
                            //loop row by row in the json, key is an index and val the row
                            var items = [];  //array
                          $.each(dataI, function(key, val) {
                            //add institution name to <option>  
                            items.push('<option>' + val['Iname'] + '</option>');
                        });//end each
                        //concatenate all html
                        htmlStr=items.join('');
                        console.log(htmlStr);
                        //append code
                        $('option#in').after(htmlStr);
                });//end getJSON
        });//end cluck


    ///////////////////////////////
   // Displays persons form an institution in a table

     $( "$subinst" ).button().click(function( event ) {
     //console.log($(this)); // for Firebug    
     $.getJSON('http://localhost/SelectPersonsBasedOnInstitution.php',function(data){   // I make an AJAX call here
     //console.log($(this)[0].url); // for Firebug   check what url I get here
                            //loop row by row in the json, key is an index and val the row
                            var items = [];  //array
                          $.each(data, function(key, val) {

                        //add table rows
                            items.push('<tr border=1><td>' + val['Pfirstname'] + '</td><td>' + val['Plastname'] + '</td><td><a mailto:=" ' + val['Pemail'] + ' " >' + val['Pemail'] + '</a></td></tr>');
                        });//end each
                        //concatenate all html
                    htmlStr=items.join('');

                        //append code
                        $('#instito').after(htmlStr);
                });//end getJSON
      event.preventDefault();
      });


    //// to send query to php file: for slect institution
    $("#subinst").click(function() {

    var url = "http://localhost/SelectPersonsBasedOnInstitution.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#myForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
    });



}); //end ready

</script>

</head>   

<body>

<form id="myForm" action="SelectPersonsBasedOnInstitution.php" method="post">
Select persons from an institution:
<br>                                            
<tr>
 <td>
   <select id="selinstit" name="instit">
   <option id="in">Select</option>                       
   </select>
 </td>
 <td>
   <input type="submit" id="subinst" value="Submit" /> 
 </td>
</tr>

</form>

   <table frame="border" id="instito">
   </table>

</body>
</html>


$（文档）.ready（函数（）{
//////////////////////////////////////
//在下拉菜单中显示机构名称
//获取选择器并在单击时运行代码
$（“#选择设置”）。单击（函数（e）{
//获取JSON对象，在它到达内部代码之后
//函数（dataI）运行时，dataI是接收的对象
$.getJSON（'http://localhost/listinstitutions.php，函数（dataI）{
//在json中逐行循环，key是索引，val是行
var items=[]；//数组
$.each（数据输入、函数（键、值）{
//将机构名称添加到
项目推送（“”+val['Iname']+“”）；
})//结束每一个
//连接所有html
htmlStr=items.join（“”）；
console.log（htmlStr）；
//附加代码
$（'option#in'）。在（htmlStr）之后；
})；//结束getJSON
})//end-cluck
///////////////////////////////
//在表格中显示机构中的人员
$（“$subinst”）.button（）。单击（函数（事件）{
//console.log（$（this））；//用于Firebug
$.getJSON（'http://localhost/SelectPersonsBasedOnInstitution.php，函数（数据）{//我在这里调用AJAX
//console.log（$（this）[0].url）；//对于Firebug，请检查我在这里得到的url
//在json中逐行循环，key是索引，val是行
var items=[]；//数组
$。每个（数据、函数（键、值）{
//添加表行
项目推送（“”+val['Pfirstname']+“”+val['Plastname']+“”+val['Pemail']+“”）；
})//结束每一个
//连接所有html
htmlStr=items.join（“”）；
//附加代码
$（#instito'）。在（htmlStr）之后；
})；//结束getJSON
event.preventDefault（）；
});
////向php文件发送查询：针对slect机构
$（“#subinst”）。单击（函数（）{
变量url=”http://localhost/SelectPersonsBasedOnInstitution.php“；//处理表单输入的脚本。
$.ajax({
类型：“POST”，
url:url，
数据：$（“#myForm”）.serialize（），//序列化表单的元素。
成功：功能（数据）
{
警报（数据）；//显示来自php脚本的响应。
}
});
return false；//避免执行表单的实际提交。
});
}); //准备就绪
从机构中选择人员：


挑选

SelectPersonsBasedOnInstitution.PHP的PHP代码

<?php


//////////
// part 1: get information from the html form
ini_set('display_errors', 1);                                      
ini_set('display_startup_errors', 1);

foreach ($_REQUEST as $key => $value){
 $$key=$value;  
}

// part2: prepare SQL query from input
$sqlquery= sprintf('SELECT "Pfirstname", "Plastname", "Pemail" FROM "PERSON"
LEFT JOIN "INSTITUTION" ON
"PERSON"."Pinstitution"="INSTITUTION"."Iinstitution"
WHERE "Iname" = \'%s\'',$instit);
//echo $sqlquery;


/////////
// part3: send query
$dbh = pg_connect("host=localhost dbname=mydv user=***password=***");
$sql=  $sqlquery;
$result = pg_query($dbh,$sql);
$myarray = pg_fetch_all($result);

$jsontext = json_encode($myarray);
echo($jsontext);

?>

我认为你应该尝试

附加，而不是在之后，尝试一下
编辑
请使用以下功能
var htmlStr = ""; //to store html
$(document).ready(function(){
    //// to send query to php file: for slect institution
        $("#subinst").click(function(event) {

        var url = "http://localhost/SelectPersonsBasedOnInstitution.php"; // the script where you handle the form input.

        $.ajax({
               type: "POST",
               url: url,
               data: $("#myForm").serialize(), // serializes the form's elements.
               success: function(data)
               {
                   //alert(data); // show response from the php script.
                   var json_data = $.parseJSON(data);
                   var items = [];  //array
                              $.each(json_data, function(key, val) {

                            //add table rows
                                items.push('<tr border=1><td>' + json_data[key].Pfirstname + '</td><td>' + json_data[key].Plastname + '</td><td><a mailto:=" ' + json_data[key].Pemail + ' " >' + json_data[key].Pemail + '</a></td></tr>');
                            });//end each
                            //concatenate all html
                        htmlStr=items.join('');

                            //append code
                            $('#instito').append(htmlStr);
               }
             });

        event.preventDefault(); // avoid to execute the actual submit of the form.
        });

});//ready()

var htmlStr=”“//存储html
$（文档）.ready（函数（）{
////向php文件发送查询：针对slect机构
$（“#子指令”）。单击（函数（事件）{
变量url=”http://localhost/SelectPersonsBasedOnInstitution.php“；//处理表单输入的脚本。
$.ajax({
类型：“POST”，
url:url，
数据：$（“#myForm”）.serialize（），//序列化表单的元素。
成功：功能（数据）
{
//警报（数据）；//显示来自php脚本的响应。
var json_data=$.parseJSON（数据）；
var items=[]；//数组
$.each（json_数据、函数（键、值）{
//添加表行
items.push（“”+json_数据[key].Pfirstname+“”+json_数据[key].Plastname+“”+json_数据[key].Pemail+“”）；
})//结束每一个
//连接所有html
htmlStr=items.join（“”）；
//附加代码
$（'#instito'）.append（htmlStr）；
}
});
event.preventDefault（）；//避免执行表单的实际提交。
});
});//就绪（）

我认为您可以删除事件处理程序$（“#subinst”）.button（）。从脚本中单击（函数（事件）{
。
我认为您应该尝试附加
，而不是之后，尝试它
编辑
请使用以下功能
var htmlStr = ""; //to store html
$(document).ready(function(){
    //// to send query to php file: for slect institution
        $("#subinst").click(function(event) {

        var url = "http://localhost/SelectPersonsBasedOnInstitution.php"; // the script where you handle the form input.

        $.ajax({
               type: "POST",
               url: url,
               data: $("#myForm").serialize(), // serializes the form's elements.
               success: function(data)
               {
                   //alert(data); // show response from the php script.
                   var json_data = $.parseJSON(data);
                   var items = [];  //array
                              $.each(json_data, function(key, val) {

                            //add table rows
                                items.push('<tr border=1><td>' + json_data[key].Pfirstname + '</td><td>' + json_data[key].Plastname + '</td><td><a mailto:=" ' + json_data[key].Pemail + ' " >' + json_data[key].Pemail + '</a></td></tr>');
                            });//end each
                            //concatenate all html
                        htmlStr=items.join('');

                            //append code
                            $('#instito').append(htmlStr);
               }
             });

        event.preventDefault(); // avoid to execute the actual submit of the form.
        });

});//ready()

var htmlStr=”“；//存储html
$（文档）.ready（函数（）{
////向php文件发送查询：针对slect机构
$（“#子指令”）。单击（函数（事件）{
变量url=”http://localhost/SelectPersonsBasedOnInstitution.php“；//处理表单输入的脚本。
$.ajax({
类型：“POST”，
url:url，
数据：$（“#myForm”）.serialize（），//序列化表单的元素。
成功：功能（数据）
{
//警报（数据）；//显示来自php脚本的响应。
var json_data=$.parseJSON（数据）；