我有这个AJAX分页代码。
$('document').ready(function() {
$("#pagination a").trigger('click'); // When page is loaded we trigger a click
});
$('#pagination, #searchButton').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
e.preventDefault();
var page = this.id; // Page number is the id of the 'a' element
var pagination = ''; // Init pagination
$('#articleArea').html('<img src="images/ajax-loader.gif" alt="" />'); // Display a processing icon
var data = {term: term, page: page, per_page: 9}; // Create JSON which will be sent via Ajax
// We set up the per_page var at 4. You may change to any number you need.
$.ajax({ // jQuery Ajax
type: 'POST',
url: 'includes/fetch-pages.php', // URL to the PHP file which will insert new value in the database
data: data, // We send the data string
dataType: 'json', // Json format
timeout: 3000,
success: function(data) {
$('#articleArea').html(data.articleList); // We update the page with the event list
console.log(data.num);
// Pagination system
if (page == 1) pagination += '<div class="cell_disabled"><span>Primero</span></div><div class="cell_disabled"><span>Anterior</span></div>';
else pagination += '<div class="cell"><a href="#" id="1">Primero</a></div><div class="cell"><a href="#" id="' + (page - 1) + '">Anterior</span></a></div>';
for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
if (i >= 1 && i <= data.numPage) {
pagination += '<div';
if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
else pagination += ' class="cell"><a href="#" id="' + i + '">' + i + '</a>';
pagination += '</div>';
}
}
if (page == data.numPage) pagination += '<div class="cell_disabled"><span>Siguiente</span></div><div class="cell_disabled"><span>Último</span></div>';
else pagination += '<div class="cell"><a href="#" id="' + (parseInt(page) + 1) + '">Siguiente</a></div><div class="cell"><a href="#" id="' + data.numPage + '">Último</span></a></div>';
$('#pagination').html(pagination); // We update the pagination DIV
},
error: function() {
}
});
return false;
});
现在我想添加一个搜索表单：
<form class="form-inline col-xs-12 col-sm-5 col-md-4 hidden-xs" id="searchFormTop">
<div class="row buscar">
<div class="form-group col-xs-9">
<input type="text" placeholder="" class="form-control" name="searchTerm" id="searchTerm" value="test">
</div>
<button type= "submit" class="btn col-xs-3" id="searchButton"> BUSCAR </button>
</div>
</form>
如何从表单中获取值并将其传递给AJAX调用？我正在尝试添加另一个事件来触发ajax调用，当表单在submited中，然后使用val（）获取搜索项值，但我不能在工作。
$('document').ready(function() {
$("#pagination a").trigger('click'); // When page is loaded we trigger a click
});
$('#pagination, #searchFormTop').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
e.preventDefault();
var page = this.id; // Page number is the id of the 'a' element
var pagination = ''; // Init pagination
var term = $('#searchTerm').val();
处理请求的PHP代码是：
$page = $_POST['page']; // Current page number
$per_page = $_POST['per_page']; // Articles per page
if ($page != 1) $start = ($page-1) * $per_page;
else $start=0;
$today = date('Y-m-d');
$term = $_POST['searchTerm']; // Current page number
// Select items list from $start.
// An item might have multiple categories. A regular join query will create a row for each category
//so that the event will be displayed as many times as categories it has.
//To group all the caegories in one single result, we can use GROUP_CONCAT and then, GROUP BY
$sql = "SELECT *, events.name AS event_name, -- THIS WILL the defferesnt categories on on eevent
GROUP_CONCAT(DISTINCT catevent.cat_id) as cats,
GROUP_CONCAT(DISTINCT categories.name SEPARATOR ', ') as cat_names
FROM events
LEFT JOIN catevent
ON catevent.event_id=events.event_id
LEFT JOIN categories
ON catevent.cat_id=categories.id
LEFT JOIN images
ON images.item_id=events.event_id
WHERE categories.parent_cat != 0
AND publish=1 AND images.item_type_id=1 AND images.img_name NOT LIKE '%sm%' -- We want to get only the name of the regular img for each event
AND final_date >= '$today'
GROUP BY events.event_id -- Needed to display all the events
ORDER BY events.initial_date ASC, events.initial_date DESC, events.name ASC
LIMIT $start, $per_page";
$select=$pdo->query($sql);
$select->setFetchMode(PDO::FETCH_OBJ);
$results = $select->fetchAll();
// Total number of articles in the database
$numArticles = $pdo->query("SELECT count(event_id) FROM events WHERE publish=1 AND final_date >= '$today'")->fetch(PDO::FETCH_NUM);
$numPage = ceil($numArticles[0] / $per_page); // Total number of page
// We build the article list
$articleList = '';
foreach( $results as $result) {
//Get final month, year, and day from date stored in db
$date_from_db=test_output($result->final_date);
$time=strtotime($date_from_db);
$year= date('Y', $time);
$year_short= substr($year,2);
$month=date('n', $time);
$day=date('j', $time);
//Get initial month, year, and day from date stored in db
$date_from_db_i=test_output($result->initial_date);
$time_i=strtotime($date_from_db_i);
$year_i= date('Y', $time_i);
$year_short_i= substr($year_i,2);
$month_i=date('n', $time_i);
$day_i=date('j', $time_i);
//get the sm image name
$lg_image=test_output($result->img_name);
$images_names=get_img_names($lg_image);
$img_sm= $images_names['regular_sm'];
//default event slug
$event_slug=test_output($result->slug);
if (empty($result->slug)||$result->slug=="default" ){
$slug=$result->event_id;
}
//get parent cat name
$parent_cat_id=test_output($result->parent_cat);
$parent_cat_name=cat_name($parent_cat_id);
//if there are several cats for one event, display them
if (isset($result->cat_names)){
$subcat=test_output($result->cat_names);
}else{
$subcat=test_output($result->name);
}
//$articleList .= '<div class="well well-sm">' . $result->id . '. <b>' . $result->title . '</b><p>' . test_output($result->description) . '</p></div>';
include('event-item-agenda.php');
}
// We send back the total number of page and the article list
$dataBack = array('numPage' => $numPage, 'articleList' => $articleList, 'num'=>$numArticles, 'term'=>$term);
$dataBack = json_encode($dataBack);
echo $dataBack;
也许，你们，可以帮我看看我做错了什么。
提前致谢 索尼娅