0

我对 Ajax 和 jquery 很陌生。我已经在这里发布了我的问题

我如何将 ajax 与 javascript 函数一起使用, 但我不清楚,所以我粘贴了我的所有代码。

我正在使用以下 javascript 函数从列表中获取用户从列表中选择的值,并将此值传递给 sql 查询以显示产品。

我正在尝试仅重新加载产品。

但是每次重新加载页面时都使用此功能。我正在尝试使用这个函数来使用 ajax。我怎样才能使用这个需要语法的 ajax。

在这 3 件事中,重新加载我的整个页面是 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&amp;";
            }

            // Pagination
            ?>
             <?php if($sort_by=="ASC")
                      $class="up-arrow";
                     else
                       $class="down-arrow";

//这里选择排序依据并在页面上查看?>

         <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();?>
4

1 回答 1

0

使用 Jquery/Ajax 的执行流程是不同的,让我尝试解释一下:

PHP在服务器上执行,执行后的结果是纯HTML+CSS+javascript。然后将此结果发送到客户端,浏览器将在客户端显示它。

因此,您在这里所做的是多次调用同一个 PHP,并且根据您传递给它的变量,您会生成不同的 HTML+CSS+javascript 结果。

那么如果我们添加 Jquery/Ajax,这将如何工作呢?

您将调用您的 PHP 一次,生成的结果必须在标记中包含 Jquery/Ajax 代码head。(您需要将 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);
});

希望这有帮助。

于 2012-12-11T11:14:57.650 回答