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

【问题标题】：Post result from a query via php in same page with Ajax使用 Ajax 在同一页面中通过 php 发布查询结果
【发布时间】：2012-05-02 20:49:30
【问题描述】：

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

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>';
}

非常感谢任何帮助。

【问题讨论】：

您应该为$cou = $_POST['country']; 添加一些输入转义（参见PHP.net documentation），并添加以下行以确保安全。
这些值（全部 3 个）不是手动插入的。用户应该从下拉菜单中选择，所以不能传递特殊字符，因为没有。
如果您想破坏安全性，可以很容易地更改请求并添加您自己的值。最好的政策是从不相信提交的任何内容，即使您认为自己知道提交的内容。

标签： php mysql ajax forms

【解决方案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可以毫无问题地处理。

【讨论】：

【解决方案2】：

我一直使用 jQuery。

$(function() {
    $('#showprice').sumbit(function() {
    $.post('includes/view.prices.php', $(this).serialize(),function(data) {  
    $('#idoftag').html(data);
    })
    });

})

【讨论】：

谢谢你们，但正如我所说，我完全是 java/ajax 的菜鸟。我尝试了大约 10 个示例，但我认为我遗漏了一些东西，所以最好的解决方案是，如果您能逐步告诉我要更改的内容和位置。
您遇到了什么问题。浏览器（我使用 safari）控制台应该会给你 javascript 错误，并且 php 错误应该插入到你设置的 html 元素中。顺便说一句，$('#idoftag') 是您希望将 php 输出到的标签（即
）。
1.我正在设置表单标签 action="" 2. 在 head 标签之前添加上面的 js 代码 3. 在 head 中添加指向 jquery.min.js 的链接 4. 在表单之后我有

5. 当我填写表格并点击提交时，页面重新加载并且没有输出。但我确信 php 脚本正在运行，因为我得到了当前代码状态的结果。
抱歉，您需要在结束标记之前添加 return false。这将阻止页面刷新

【解决方案3】：

在朋友的帮助下，我设法做到了：

1) 在文件的头部添加表单：

<script type="text/javascript" src="path-to-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var working = false;
$('#id-of-form').submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
//$('#submit').val('Sending..');
$.post('path-to-php-file-to-be-executed',$('#id-of-form').serialize(),function(msg){
working = false;
//$('#submit').val('Submit');
$('#id-of-div-where-result-will-be-outputed').html(msg);
});
});
});
</script>

2) 在表单后添加输出数据的 div

<div id="output_div"></div>

3) 在 path-to-php-for-execution 添加：

if(isset($_POST['id-of-form-field-1']) && isset($_POST['id-of-form-field-2']) && isset($_POST['id-of-form-field-3'])) {

// some queries here

}

就是这样

【讨论】：

【解决方案4】：

在您的表单中，引用您当前的页面作为操作值...例如，如果您的页面是 index.php。然后使用 action="index.php" 和 method="post"。在您希望数据出现的 div 中，以正确的格式编写 php 代码并用 if($_POST){ -您的数据库检索代码 - } ?> 括起所有这些代码。这意味着您的发布操作将调用同一页面，这将使您的代码周围的条件为真，因此被执行。希望这会有所帮助，当时它一直困扰着我，但我这样做了。

【讨论】：

这里没有使用Ajax，所以并没有真正回答用户的问题。

【解决方案5】：

在 Notepad++ 中，您的 { } 似乎不匹配。当我在 die 语句之后删除一个，并且在 else 之上删除一个时，它们排成一行。

【讨论】：