在 ajax 表单提交上更新 mysqli 查询
Posted
技术标签:
【中文标题】在 ajax 表单提交上更新 mysqli 查询【英文标题】:update mysqli query on ajax form submit 【发布时间】:2018-06-17 05:10:21 【问题描述】:我有一个动态的 php 页面,显示来自数据库的所有结果,我想创建一个搜索栏,在用户输入的每个字符处更新。 我的问题是我无法进行查询更新!他总是不显示任何结果。首先,我在与表单相同的页面中进行了查询,但这不起作用,因为当我在参数中使用该 url 时,ajax 将运行页面中的所有代码,所以我拆分了所有内容,但它仍然不起作用。有什么建议吗?
PHP 页面 - 带有搜索栏的部分 --> categorias.php:
<div class="container">
<h2 class="title">Empresas De Confianza</h2>
<div class="col-lg-12">
<div class="col-lg-6 col-centered">
<form method="POST" action="buscador.php" id="search">
<input class="search-bar" type="text" name="filterName" id="filterName">
<button type="submit" hidden></button>
<?php
$msqliquery = "SELECT * FROM empresa WHERE categorias_id = $id AND menulogo IS NOT NULL";
$array = $connection->query($msqliquery);
?>
</form>
</div>
</div>
<?php
echo '<div class="row index-margin" id="results">';
if (mysqli_num_rows($array) == 0)
echo "<h2 class='text-center'>No hemos encontrado ningún resultado con esa busqueda!</h2><ul class='text-center'><li class='list-categorias'><a class='fa-categorias fa fa-refresh' href='categorias.php?id=$id'></a></li></ul>";
;
while ($field = mysqli_fetch_array($array))
?>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 parent size">
<a style="background-color:<?php echo $field['color'] ?>"
href="profile.php?id=<?php echo $field['id'] ?>">
<img src="/test<?php echo $field['menulogo'] ?>" class="logo img-grayscale">
<div class="hover-item"><h5 class="label-profile"><?php echo $field['nombre'] ?></h5></div>
</a>
</div>
<?php
echo '</div>' ?>
' 表单/搜索栏处理 --> buscador.php:
<?php
require 'config.php';
$connection = new mysqli($servername, $username, $password, $db);
session_start();
$id = $_SESSION['id'];
$filterName = $_POST['filterName'];
$msqliquery = "SELECT * FROM empresa WHERE categorias_id = $id AND menulogo
IS NOT NULL AND nombre COLLATE UTF8_GENERAL_CI LIKE '%$filterName%'";
$array = $connection->query($msqliquery);
在每个字符和 ajax 表单提交时更新的功能:
$(document).ready(function ()
var timeoutID = null;
$('#filterName').keyup(function (e)
clearTimeout(timeoutID);
timeoutID = setTimeout(searchEmpresa.bind(undefined, e.target.value), 500);
);
function searchEmpresa(str)
console.log('search: ' + str);
$("#search").submit(function (event)
$.ajax(
method: "POST",
url: 'buscador.php',
data: $("#filterName").val(),
success: function (data)
console.log(data);
$("#results").load("categorias.php #results > *");
);
event.preventDefault();
);
)
【问题讨论】:
您遇到的错误是什么? 它总是不返回任何结果... 【参考方案1】:您必须将数据作为具有键值对的对象发送
data: filterName:$("#filterName").val(),
你还必须更正方法:'post',所以你应该有发布方法而不是发布类型 希望对你有帮助。
将此代码放在您的 buscador.php 中
<?php
if (mysqli_num_rows($array) == 0)
echo "<h2 class='text-center'>No hemos encontrado ningún resultado con esa
busqueda!</h2><ul class='text-center'><li class='list-categorias'><a
class='fa-categorias fa fa-refresh' href='categorias.php?id=$id'></a></li>
</ul>";
;
while ($field = mysqli_fetch_array($array))
?>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 parent size">
<a style="background-color:<?php echo $field['color'] ?>"
href="profile.php?id=<?php echo $field['id'] ?>">
<img src="/test<?php echo $field['menulogo'] ?>" class="logo img-
grayscale">
<div class="hover-item"><h5 class="label-profile"><?php echo
$field['nombre'] ?></h5></div>
</a>
</div>
<?php
echo '</div>' ?>
并将其附加到带有 id 结果的 div
$('#result').append(data);
【讨论】:
现在 ajax 在创建的第一个 div 上工作,它显示它但没有内容。空 div 和其他人从最初的查询中就留在了那里。如果它有助于看到它,页面就是这个:esdeconfianza.com/categorias.php?id=2 检查您在控制台中得到的结果并将其粘贴到此处 我没有收到任何控制台错误,就是这样!我的控制台中唯一的东西是 console.log 请检查您的控制台并告诉我您得到的响应,响应中应该有一些数据。因为您正在执行 console.log(data)。因此,如果它是从您的 php 文件中获取的,它应该会向您显示一些结果 还有一件事是您没有返回或回显 php 文件中的任何值。所以你必须像这样返回数组值。返回$数组;或 var_dump($array) 所以你一定会得到结果以上是关于在 ajax 表单提交上更新 mysqli 查询的主要内容,如果未能解决你的问题,请参考以下文章
PHP JS ajax在页面加载时提交表单,并且一旦另一个函数成功也会触发