Question

我无法弄清楚如何在表格中显示查询结果。 html表单有一个下拉菜单，允许选择机构名称。该表应显示属于该机构的人员。当我通过提交按钮执行代码时，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>

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);

?>

Answer 1

我认为您应该尝试append而不是after，尝试一下。

修改

请使用以下功能

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()

我认为您可以从脚本中删除事件处理程序$( "#subinst" ).button().click(function( event ) {。

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

1 个答案: