Javascript 基于搜索条件在ajax发布后刷新表
全部, 我有一个模式,其中包含一个表,其中包含使用PHP include的PHP查询的结果,问题是,如果第一次打开页面时加载了该模式,我似乎无法在以后使用AJAX post根据textbox变量刷新表 这是我的密码 HTML PHP sql_search.PHPJavascript 基于搜索条件在ajax发布后刷新表,javascript,php,html,ajax,Javascript,Php,Html,Ajax,全部, 我有一个模式,其中包含一个表,其中包含使用PHP include的PHP查询的结果,问题是,如果第一次打开页面时加载了该模式,我似乎无法在以后使用AJAX post根据textbox变量刷新表 这是我的密码 HTML PHP sql_search.PHP $value = (isset($_POST['value']) ? $_POST['value'] : null); if ($value == null){ $sql = "SELECT * FROM helpdesk"; }
$value = (isset($_POST['value']) ? $_POST['value'] : null);
if ($value == null){
$sql = "SELECT * FROM helpdesk";
}
else{
$sql = "SELECT * FROM helpdesk WHERE ID = $value";
}
$result = mysqli_query( $conn, $sql);
while( $row = mysqli_fetch_array($result))
{
echo '<tr>';
echo '<td>'.$row['ID'].'</td>' . '<td>'.date("d/m/Y g:i:s A", strtotime($row['DateCreated'])).'</td>' . '<td>'.$row['Priority'].'</td>' . '<td>'.$row['Company'].'</td>' . '<td>'.$row['Name'].'</td>' . '<td>'.$row['Subject'].'</td>' . '<td>'.$row['Name'].'</td>';
echo '</tr>';
}
我得到的结果是返回每个数据库项。我在AJAX成功中使用了alertoutput来确认变量实际上正在被传递,所以我想我现在只需要解决如何更新表
有什么建议吗
谢谢不要在html中包含您的PHP文件,而是为您想要输出的元素指定一个id。然后在JavaCScript中,使用AJAX调用返回的数据填充内容
<div class="modal-content">
<div class="modal-header">
<span class="close">x</span>
</div>
<div class="modal-body">
<div id="divSearchResultsTable">
<table class="tblSearchResults" id="tblSearchResults">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Home</th>
<th>Mobile</th>
<th>City</th>
<th>Country</th>
<th>Company</th>
</tr>
</thead>
<tbody id="modalContent">
<!-- note, no content and tbody has an ID -->
<tbody>
</table>
</div>
<div id="divSearchResultsButtons">
<input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/>
 
<input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/>
</div>
</div>
</div>
以及javascript代码:
$(function(){
$('#btnSearch').click(function(e){
var modal = document.getElementById('modal');
var value = $("#txtSearch").val();
$.ajax({
type : "POST",
url : "sql_search.php",
data : {value:value},
success : function(output) {
alert(output);
$('#modalContent').html(output); // <------
modal.style.display = 'block';
modal.focus();
}
});
});
});
顺便说一句,您的PHP代码是不安全的,因为它在SQL查询中直接使用其参数,而不进行验证或类型转换SQL注入,并且从数据库输出数据而不转义html存储的html/Javascript注入。考虑使用具有参数的PDO,并将数据库输出值封装到HTMLExpCARS调用中,我无法看到ID模式的表。您将在Javascript中获得它谢谢您的帮助,现在可以正常工作了,我将获得预期的结果,但是行不再是可选的。下面是用于使行可选择的JavaScript,现在是否需要更改某些内容才能使其正常工作。我目前只做了您建议的更改。感谢$function{$tblSearchResults tr.clickfunction{$this.addClass'selected'。兄弟.removeClass'selected';};};我解决了这个问题,我只需要移动一些代码,并将其放在“success:”函数下。再次感谢您对不安全PHP代码的帮助和提示。我将设法解决这个问题:
<div class="modal-content">
<div class="modal-header">
<span class="close">x</span>
</div>
<div class="modal-body">
<div id="divSearchResultsTable">
<table class="tblSearchResults" id="tblSearchResults">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Home</th>
<th>Mobile</th>
<th>City</th>
<th>Country</th>
<th>Company</th>
</tr>
</thead>
<tbody id="modalContent">
<!-- note, no content and tbody has an ID -->
<tbody>
</table>
</div>
<div id="divSearchResultsButtons">
<input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/>
 
<input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/>
</div>
</div>
</div>
$(function(){
$('#btnSearch').click(function(e){
var modal = document.getElementById('modal');
var value = $("#txtSearch").val();
$.ajax({
type : "POST",
url : "sql_search.php",
data : {value:value},
success : function(output) {
alert(output);
$('#modalContent').html(output); // <------
modal.style.display = 'block';
modal.focus();
}
});
});
});