php - 使用 Ajax 在同一页面中通过 php 发布查询结果

Question

我的网站上有一个带有 3 个下拉框的表单。在用户从每个选项中选择一个选项并点击提交后，数据将发布到外部 php 文件，该文件对 MySQL 进行查询，然后重新加载页面并发布结果。我想让这更花哨 - 使用 ajax 而无需重新加载页面。问题是我完全裸体了。我搜索 interned 并尝试了几个例子但没有结果。这是代码:

HTML 格式:

<form name="showprice" id="showprice" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="country" id="country">
<option value="">Select Country</option>
</select>
<select name="industry" id="industry" onchange="setOptions(document.showprice.industry.options[document.showprice.industry.selectedIndex].value);">
<option value="">Select Industry</option>
</select>
<select name="quality" id="quality">
<option value=" " selected="selected">Select country and industry first.</option>
</select>
<input value="Submit" type="submit" name="submit" id="submit">
</form>

<script  type="text/javascript">
var frmvalidator = new Validator("showprice");
frmvalidator.addValidation("country","req","Please select country");
frmvalidator.addValidation("industry","req","Please select industry");
frmvalidator.addValidation("quality","req","Please select quality");
</script>

注意:我已经删除了选项以节省空间。

外部 View .prices.php:

它在另一个文件夹中，现在我用

调用结果

<?php include('includes/view.prices.php'); ?>

目前的代码是:

if(isset($_POST['submit'])) {
include ('config.php');
$con1 = mysql_connect($server, $username, $password);
if (!$con1)
{
die(<b>Could not connect: </b> . mysql_error());
}
echo'<br /><br /><table id="myTable" class="tablesorter" align="center">
<thead>
<tr>
**some table headers (8 columns)**
</tr>
</thead>
<tbody>';

$cou = $_POST['country'];
$ind = $_POST['industry']; 
$qua = $_POST['quality'];

$sql = "SELECT * FROM $ind WHERE quality=$qua AND desig=$cou ORDER BY id ASC" or  die('<b>Data Insert Error:</b> ' . mysql_error());

echo("<tr>
**Some table results with 8 variables taken from the MySQL database**
</tr>");

if (!mysql_query($sql,$con1))
{
die('Error: ' . mysql_error());
}
}
echo    '</tbody>
</table>';
mysql_close($con1);
}}
else {
echo '<div class="grid_9">
<p><b>TIP:</b> Pick country, industry and quality from the drop-down above and hit "Submit" button to view results.</p>
</div>';
}

非常感谢任何帮助。

Answer 1

我会研究 jQuery。您将要禁用默认处理程序:

e.preventDefault();

然后使用 jQuery，您可以执行以下操作:

   $.ajax({
        type: 'POST',
        url: '',
        data: $("#showprice").serialize(),  dataType: 'json',
        success: function(data){
            if( data['status'] == 'success' )
            {           
              // Do stuff here
            } 
        }
    });

该代码假定您将返回一个 json 编码的字符串。哪个 jQuery 可以毫无问题地处理。