使用jquery在表单中显示查询结果

时间:2011-08-09 01:37:33

标签: jquery

一位朋友最近向我介绍了jquery,现在我想用它重写并开发一个库存Web应用程序。

我的原始应用程序包含一个简单的网页,要求您输入ID号并单击按钮。 id号通过post方法传递给php文件。 php文件查询数据库并在表格中显示结果。

我创建了一个HTML表单,我想使用更新,输入新记录,并根据按下的按钮显示查询结果。

此时我想显示查询结果。

我已经想出如何使用jquery在表单底部的div中显示查询结果。我需要帮助的是如何在表单的给定位置显示结果。

以下是我想要的一个简单例子:

HTML

<html>  
< head>  
< title>JQuery test< /title>  
< /head>  
< body>  
< form>  
< table>  
< tr>< th>Equipment ID< /th>  
< td>< input type="text name="eqid" id="eqid" />< /td>  
< th>Manufacturer< /th>  
< td>< input type="text name="manuf" id="manuf" />< /td>  
< th>Model< /th>  
< td>< input type="text name="model" id="model" />< /td>< tr>  
< /table>  
< div id=output> < /div>  
< /form>  
< /body>  
< /html>  

JQUERY

$("#submit_btn").click(function()  
{  
  var data = $('form:first').serialize();  
   $.ajax(  
   {  
    url:"passdata.php",   
    type: "POST",  
    data:data,  
    success:function(data)  
    {  
       $("#output").html(data);  
    } //end success  
   }); // end ajax  
});  // end click  

这就是我在我的php文件中使用的

PHP

<?php
    $eqid = $_POST['eqid'];  
    $manuf = 'Apple';  
    $model ='IPAD 2';  

    echo "<table border=0><tr>";
    echo "<th align ='left'>Manufacturer</th><td><input name='manuf' id='manuf' type='text' size='10' value=" . $manuf . "></td></tr>";  
    echo "<tr><th align ='left'>Surveyed by</th><td><input name='model' id='model' type='text' value=". $model . "></td></tr></total>";  
?php>

我希望查询(制造商和型号)的结果显示在上面示例中表单的适当位置。

任何建议都将不胜感激。

克里斯

1 个答案:

答案 0 :(得分:1)

passdata.php需要进行数据库查询,然后返回数据。 JSON是一种很好的方法。

<?php
$iteminfo = array('id' => $id, 'manuf' => $manuf, 'model' => $model);

echo json_encode($iteminfo);
?>

您的ajax调用然后需要获取此数据并填充您的表单。

$("#submit_btn").click(function()  
{  
  var data = $('form:first').serialize();  
   $.ajax(  
   {  
    url:"passdata.php",   
    type: "POST", 
    dataType: 'json', 
    data:data, 
    success:function(data)  
    {  
       $("eqid").val(data.id); 
       $("manuf").val(data.manuf);
       $("model").val(data.model);      
    } //end success  
   }); // end ajax  
});  // end click 

当然如果你在所有CRUD操作中使用相同的表单,那么你的php必须像你的javascript一样偷偷摸摸。你确定这对你来说是一个好主意吗?