1

我无法弄清楚如何在表中显示查询结果。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);

?>
4

1 回答 1

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 ) {而且我认为您可以从脚本中删除事件处理程序。

于 2013-03-28T08:29:22.800 回答