[英]HTML form POST to AJAX and then POST to PHP page
我有一個帶有搜索功能的PHP頁面,並且使用AJAX進行分頁。 當我提交搜索輸入時,AJAX應該獲取輸入並將其傳遞到PHP頁面,該頁面將進一步查詢數據庫。 最后一點不起作用,我一直在努力理解原因。 任何人都可以幫忙。 我的代碼如下:
PHP / HTML頁面,格式為:
<form action="" id="postData" method="post">
<p><b> Search all videos in database below: </b></p>
<ul><center>   Keywords: </center>
<input type="text" id="input" name="input" size="50" maxlength="64">
</ul>
<ul>
<center><input type="submit" name = "submit" value ="Search"></center>
</ul>
</form>
帶有AJAX的Javascript:
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='../images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "search_videos.php",
data: { 'page': page, 'input': $('#postData').serialize()},
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}
});
});
PHP查詢和打印結果:
<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 5;
$previous_btn = true;
$next_btn = true;
$start = $page * $per_page;
include"core/database/connect.php";
// Get the input of the selected video
$input = $_POST['input'];
//$input = 'video';
echo $input; // CANNOT get input variable from the initial form!
... The mysql query and rest of the code continued ...
HTML:
<div>
<p><b> Search all videos in database below: </b></p>
<ul>
<li>
<label for="keywords">Keywords</label>
<input type="text" id="keywords" name="keywords" size="50" maxlength="64" />
</li>
<li>
<button onClick="loadData()">Search</button>
</li>
</ul>
</div>
<div id="container">
</div>
Javascript:
$(document).ready(function(){
// ...
function loadData()
{
loading_show();
$.ajax
({
type: "POST",
url: "http://yourwebsite.com/search_videos.php",
data: { 'keywords': $('#keywords').val() },
success: function(msg)
{
loading_hide();
$("#container").html(msg);
}
});
}
});
PHP:
echo $_POST['keywords'];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.