我是Ajax和jquery的新手。 我已经在这里发布了我的问题
How can i use ajax with javascript function 但我不清楚，所以我粘贴了我的所有代码。
我正在使用以下javascript函数从列表中获取用户从列表中选择的值，并将此值传递给sql查询以显示产品。
我想尝试仅展示产品。
但每次重新加载页面时都使用此功能。我正在尝试使用这个函数使用ajax。我可以使用带有这种需要语法的ajax。
在这3件事中Reaload我的整个页面都是1）搜索表单2）排序3）页面上的查看（限制）
<?php
/*
Template Name:Wheel
*/
?>
<?php get_header(); ?>
<script type="text/javascript" language="javascript">
function pagelim(index){
var page_lim=$('#page_num li').get(index).id;
$("#main-content-wrap").load("<?php echo get_option('head'); ?>"+'?wheel&limit=' + page_lim);
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index){
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
self.location="<?php echo get_option('head'); ?>"+'?wheel&sort=' + date_by ;
}
</script>
<script type="text/javascript" language="javascript">
onLoad(){
//search-option_form.removeClass('jqtransformdone');
}
</script>
<?php
$sort_by=$_GET['sort'];
if($sort_by=="")
{
$sort_by="ASC";
}
else
{
$sort_by=="DESC";
}
$page = (get_query_var('page')) ? get_query_var('page') : 1;
$lim=$_GET['limit'];
if($lim=="")
$limit = 1;
else
$limit =$lim;
$offset = ( $page - 1 ) * $limit;
if(isset($_POST['searchsubmit']))
{
$i=1;
$search_query="SELECT * FROM wp_products WHERE 1";
if($_POST['rim_size']!=0)
{$search_query=$search_query." AND rim='".$_POST['rim_size']."'"." ";}
if($_POST['studs']!=0)
{$search_query=$search_query." AND studs='".$_POST['studs']."'"." ";}
if($_POST['miles']!=0)
{
$value=$_POST['miles']-5000;
$search_query=$search_query." AND miles BETWEEN $value AND ". $_POST['miles']." ";
}
if(($_POST['min_price']!=0)&&($_POST['max_price']!=0))
{
$search_query=$search_query." AND "."price BETWEEN ". $_POST['max_price']." AND ".$_POST['min_price']." ";
}
$search_query=$search_query." LIMIT $offset,$limit";
$data=$wpdb->get_results($search_query);
}//if ends
else{$data = $wpdb->get_results("select * from wp_products order by product_id $sort_by
LIMIT $offset,$limit ");}
?>
<div class="main noborder" >
<div id="main-content-wrap">
<!-- - - - - - - - - - - - - - - Container - - - - - - - - - - - - - -
- - -->
<section class="container sbr clearfix left-section">
<!-- - - - - - - - - - - - - - - Content - - - - - - - - - - - - - - -
- -->
//这是搜索框
<div class="widget_custom_search">
<h3 class="widget-title"><span>Search</span> Filters</h3>
<form method="post" id="search-option-form" class="form-panel">
<fieldset>
<label>Rim Size</label>
<select name="rim_size" class="width-190">
<option value="0" >Select</option>
<option value="15" <?php if($_POST['rim_size']=="15") { ?> selected="selected" <?php } ?>>15 Inch</option>
<option value="16" <?php if($_POST['rim_size']=="16") { ?> selected="selected" <?php } ?>>16 Inch</option>
<option value="17" <?php if($_POST['rim_size']=="17") { ?> selected="selected" <?php } ?>>17 Inch</option>
<option value="18" <?php if($_POST['rim_size']=="18") { ?> selected="selected" <?php } ?>>18 Inch</option>
<option value="19" <?php if($_POST['rim_size']=="19") { ?> selected="selected" <?php } ?>>19 Inch</option>
</select>
</fieldset>
<fieldset>
<label>No. of Studs</label>
<select name="studs" class="width-190">
<option value="0">Select</option>
<option value="3" <?php if($_POST['studs']=="3") { ?> selected="selected" <?php } ?> >3</option>
<option value="4" <?php if($_POST['studs']=="4") { ?> selected="selected" <?php } ?> >4</option>
</select>
</fieldset>
<fieldset>
<span class="w110p floatLeft display-block">
<label>Min Price</label>
<select name="min_price" class="floatLeft">
<option value="0">Select</option>
<option value="1000" <?php if($_POST['min_price']=="1000") { ?> selected="selected" <?php } ?> >1000</option>
<option value="2000" <?php if($_POST['min_price']=="2000") { ?> selected="selected" <?php } ?>>2000</option>
['min_price']=="6000") { ?> selected="selected" <?php } ?>>6000</option>
</select>
</span> <span class="w110p floatLeft display-block">
<label>Max Price</label>
<select name="max_price" class="floatLeft">
<option value="0">Select</option>
<option value="1000" <?php if($_POST['max_price']=="1000") { ?> selected="selected" <?php } ?>>1000</option>
<option value="2000" <?php if($_POST['max_price']=="2000") { ?> selected="selected" <?php } ?>>2000</option>
<option value="3000" <?php if($_POST['max_price']=="3000") { ?> selected="selected" <?php } ?>>3000</option>
</select>
</span>
</fieldset>
<fieldset>
<label>Miles</label>
<select name="miles" class="width-190">
<option value="0">Select</option>
<option value="5000" <?php if($_POST['miles']=="5000") { ?> selected="selected" <?php } ?>>5000</option>
<option value="10000" <?php if($_POST['miles']=="10000") { ?> selected="selected" <?php } ?>>10000</option>
<option value="60000" <?php if($_POST['miles']=="60000") { ?> selected="selected" <?php } ?>>60000</option>
<option value="65000" <?php if($_POST['miles']=="65000") { ?> selected="selected" <?php } ?>>65000</option>
<option value="70000" <?php if($_POST['miles']=="70000") { ?> selected="selected" <?php } ?>>70000</option>
</select>
</fieldset>
<fieldset class="top-padding-30">
<button name="searchsubmit" type="submit" id="searchsubmit" class="common-button green-button-bg w90p floaL mLeft5">SEARCH</button>
</fieldset>
</form>
<!--/ .form-panel-->
</div>
</section>
<!--/.container -->
<!-- - - - - - - - - - - - - end Container - - - - - - - - - - - - - -
- - -->
<section class="container clearfix right-section">
<div id="pagination-sort-lniks">
<?php
$total=$wpdb->get_results("select * from wp_products ");
$pages = COUNT($total);
$pages = ceil($pages / $limit);
$querystring = "";
foreach ($_GET as $key => $value) {
if ($key != "page") $querystring .= "$key=$value&";
}
// Pagination
?>
<?php if($sort_by=="ASC")
$class="up-arrow";
else
$class="down-arrow";
//这里选择排序方式并在页面上查看？＆gt;
<div class="sort-links"><span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
<span id="view-on-page">View on Page: <a href="#" class="down-arrow"><?php if($lim=="") { _e($limit); } else { _e($lim); } ?></a>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())"><a href="#">5</a></li>
<li id="10" onclick="pagelim($(this).index())"><a href="#">10</a></li>
<li id="15" onclick="pagelim($(this).index())"><a href="#">15</a></li>
</ul>
</span>
</div>
<div class="pagination">
<?php
if( $pages > 1)
{
$range=1;
$showitems = ($range * 2)+1;
$page1=$page;
$prev=$page1-1;
if($page > 1)
{
echo "<a class=\"page gradient\" ";
echo "href=\"?{$querystring}page=$prev";
echo "\">Previous</a> ";
}
for ($i = 1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $page+$range+1 || $i <= $page-$range-1) || $pages <= $showitems ))
{
if($i == $page)
{
echo "<span class=\" page active\">".$i."</span>";
}
else
{
echo "<a class=\"page gradient\"";
echo "href=\"?{$querystring}page=$i";
echo "\">$i</a> ";
}
}
}
if($page!=$pages)
{
if($showitems < $pages)
{
echo "..... ";
}
$page1=$page;
$next=$page1+1;
echo "<a " . ($i == $page ? "class=\"page active\" " : "class=\"page gradient\"");
echo "href=\"?{$querystring}page=$next";
echo "\">Next</a> ";
}
}
?>
</div>
</div>
<?php
$tim_path = get_bloginfo('template_directory')."/scripts/timthumb.php?src=";
if(count($data)>0)
{
foreach($data as $row)
{
$userid = $row->dealer_id;
$metakey="addr1";
$prod_id = $row->product_id;
$image=$wpdb->get_results("select DISTINCT(product_id),prod_image from wp_product_images where product_id=$prod_id LIMIT 1");
foreach($image as $row1)
{
$image_name = $row1->prod_image;
}
?>
<?php $location=get_usermeta( $userid, $metakey ); ?>
<ul class="product-wrap" id="product-wrap">
<li><a href="#" class="current details-link" ><img src="<?php _e($tim_path) ?><?php bloginfo('template_directory');?>/product_images/<?php _e($image_name."&w=140&h=105&zc=0&watermark=0") ?>" class="thumb" alt=""/>
<?php if($row->bestdeal==1)
{?>
<span class="best-deal-icon right100" ></span> <?php }?>
</a>
<div class="product-title clearfix">
<h3 class="textBold"><?php _e($row->product_name) ?></h3>
<span class="product-price bTextColor"><?php _e($row->price)?></span> </div>
<div class="tech-details"> <span class="span1">Technical details : </span> <span class="span2"><?php _e($row->rim) ?>"</span> <span
class="span3"><?php _e($row->studs) ?>Studs</span> <span class="span4"><?php _e($row->colour) ?></span>
<span class="span5"><?php _e($row->miles) ?>Mil</span> </div>
<div class="location-details" style=""> <span class="location-display">Location : <?php _e($location) ?> </span> <span
class="view-details"><a href="<?php _e(get_option('home'))?>/details/?prod=<?php _e(base64_encode($row->product_id)) ?>" class="readmore">View details</a> </span> </div>
</li>
</ul>
<?php }
}
else
{
echo '<div class="no_records">Sorry!!No Products Found You Can Search Another. </div>';
}
?>
<!--/ .adjective-->
<div id="pagination-sort-lniks">
<div class="pagination">
<?php
if( $pages > 1)
{
$range=1;
$showitems = ($range * 2)+1;
$page1=$page;
$prev=$page1-1;
if($page > 1)
{
echo "<a class=\"page gradient\" ";
echo "href=\"?{$querystring}page=$prev";
echo "\">Previous</a> ";
}
for ($i = 1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $page+$range+1 || $i <= $page-$range-1) || $pages <= $showitems ))
{
if($i == $page)
{
echo "<span class=\" page active\">".$i."</span>";
}
else
{
echo "<a class=\"page gradient\"";
echo "href=\"?{$querystring}page=$i";
echo "\">$i</a> ";
}
}
}
if($page!=$pages)
{
if($showitems < $pages)
{
echo "..... ";
}
$page1=$page;
$next=$page1+1;
echo "<a " . ($i == $page ? "class=\"page active\" " : "class=\"page gradient\"");
echo "href=\"?{$querystring}page=$next";
echo "\">Next</a> ";
}
}
?>
</div>
</div>
</section>
</div>
</div>
<!--/ .main-->
<?php get_footer();?>
答案 0 :(得分：0)
使用Jquery / Ajax，执行流程不同，让我试着解释一下：
PHP在服务器上执行，执行后结果是纯HTML + CSS + javascript。然后将此结果发送到客户端，浏览器将在其中显示该结果。
所以你在这里做的是多次调用相同的PHP，并且根据传递给它的变量，你会生成不同的HTML + CSS + javascript结果。
那么如果我们添加Jquery / Ajax会如何工作呢？
您将调用您的PHP一次，结果生成HAS以包含head标记中的Jquery / Ajax代码。 （您需要将jquery JS文件添加为script标记）。当用户决定进行排序时，您不会再次调用整个PHP脚本。您应该调用第二个PHP脚本，专用于仅返回要刷新的HTML部分。这是一个例子：
$.post("returnhtml.php", {var1: var1, var2: var2}, function(data){
// the var data contains everything "returnhtml.php" echoed
$("#div_we_want_to_refresh_id").html(data);
});
希望这会有所帮助。