如何获取ajax请求到同一页面?

时间:2015-08-28 03:48:56

标签: javascript php jquery ajax

我正在实施一个不定式滚动网页。它运作良好。它有两页

1. index.php

2. getrecords.php

我的index.php页面是

<html>

//some html codes here

//my java script
<script type="text/javascript">
  var busy = false;
  var limit = 6
  var offset = 0;
  var anotherID = 5


   function displayRecords(lim, off) {
    $.ajax({
      type: "GET",
      async: false,
      url: "getrecords.php",
      data: "limit=" + lim + "&offset="+ off+"&anotherID="+anotherID,
      cache: false,
      beforeSend: function() {
        $("#loader_message").html("").hide();
        $('#loader_image').show();
      },
      success: function(html) {
        $("#results").append(html);
        $('#loader_image').hide();
        if (html == "") {
          $("#loader_message").html('<button class="btn btn-default btn-block" type="button">No more records.</button>').show()
        } else {
          $("#loader_message").html('<button class="btn btn-default btn-block"  type="button"><div id="loader_image"><img src="loader.gif" alt="" width="24" height="24">Loading please wait...</button>').show();
        }
        window.busy = false;


      }
    });
  }

  $(document).ready(function() {
    // start to load the first set of data
    if (busy == false) {
      busy = true;
      // start to load the first set of data
      displayRecords(limit, offset);
    }


    $(window).scroll(function() {
      // make sure u give the container id of the data to be loaded in.
      if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
        busy = true;
        offset = limit + offset;

        // this is optional just to delay the loading of data
        setTimeout(function() { displayRecords(limit, offset); }, 500);

        // you can remove the above code and can use directly this function
        // displayRecords(limit, offset);

      }
    });

  });

</script>

</html>

我的getrecords.php页面是

<?php
require_once("config.php");


$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 10;
$offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;
$id = $_GET["anotherID"];
$query = $id;
$sql = "SELECT * FROM x where title like '%xx%' ORDER BY rand() LIMIT      $limit OFFSET $offset";

try {
$stmt = $DB->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll();
} catch (Exception $ex) {
 echo $ex->getMessage();
}
if (count($results) > 0) {
foreach ($results as $res) {
echo 'something';
}
}
?>

出于某种原因,我想将这两个页面合并为一个页面。我想将getrecords.php的编码放在index.php内并制作一个页面。我尝试了很多选择,但没有任何帮助。我怎样才能做到这一点?提前谢谢。

4 个答案:

答案 0 :(得分:1)

我的问题是:“你为什么要那样做?”分离关注是一件好事。例如,MVC就是以此为基础的。这里有2个功能,一个是页面或视图,一个是服务器操作或控制器,或者可以是REST服务。将它们分开是没有错的。

但我认为你有充分的理由。

在您的情况下,您尝试将一个“自引用”页面与两个功能组合在一起,为此,有两种方法最常见:

  1. 通过AJAX调用传入一个特殊变量并使用if语句。
  2. 通过检测Content-type,自动检测是在标准上下文还是AJAX上下文中调用页面。例如,如果content-type为json,则返回记录,否则,呈现主视图并执行AJAX调用。示例:$_SERVER["CONTENT_TYPE"] - 但请记住,这不是100%可靠,您需要确保在AJAX请求中传递Content-type标头。

答案 1 :(得分:0)

当你ajax到同一页面时 - 传递一些参数,例如ids。现在你的整个页面将由2个页面组成,但如果你收到3 - 然后返回当前位于getrecords页面上的脚本结果,否则在index.php中做你需要的任何事情。别忘了将ajax参数更改为POST并传递参数

答案 2 :(得分:0)

包裹代码
if (isset($_GET['offset'])) {
    // All the code from get records.php
} else {
    // All the code from index.php
}

在第一页请求中,_GET变量不会被设置,因此index.php代码将运行,Ajax请求将在后续请求中提供。

答案 3 :(得分:0)

尝试将getrecords.php包含在index.php中并写入条件以检查ajax是否请求,如果其ajax然后执行登录并退出,否则html部分

<?php

    if(isset($_GET["anotherID"])){
    require_once("config.php");

    $limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 10;
    $offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;
    $id = $_GET["anotherID"];
    $query = $id;
    $sql = "SELECT * FROM x where title like '%xx%' ORDER BY rand() LIMIT      $limit OFFSET $offset";

    try {
    $stmt = $DB->prepare($sql);
    $stmt->execute();
    $results = $stmt->fetchAll();
    } catch (Exception $ex) {
     echo $ex->getMessage();
    }
    if (count($results) > 0) {
    foreach ($results as $res) {
    echo 'something';
    }
    }
    exit;
    }
    ?>

    <html>

    //some html codes here

    //my java script
    <script type="text/javascript">
      var busy = false;
      var limit = 6
      var offset = 0;
      var anotherID = 5


       function displayRecords(lim, off) {
        $.ajax({
          type: "GET",
          async: false,
          url: "getrecords.php",
          data: "limit=" + lim + "&offset="+ off+"&anotherID="+anotherID,
          cache: false,
          beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
          },
          success: function(html) {
            $("#results").append(html);
            $('#loader_image').hide();
            if (html == "") {
              $("#loader_message").html('<button class="btn btn-default btn-block" type="button">No more records.</button>').show()
            } else {
              $("#loader_message").html('<button class="btn btn-default btn-block"  type="button"><div id="loader_image"><img src="loader.gif" alt="" width="24" height="24">Loading please wait...</button>').show();
            }
            window.busy = false;


          }
        });
      }

      $(document).ready(function() {
        // start to load the first set of data
        if (busy == false) {
          busy = true;
          // start to load the first set of data
          displayRecords(limit, offset);
        }


        $(window).scroll(function() {
          // make sure u give the container id of the data to be loaded in.
          if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
            busy = true;
            offset = limit + offset;

            // this is optional just to delay the loading of data
            setTimeout(function() { displayRecords(limit, offset); }, 500);

            // you can remove the above code and can use directly this function
            // displayRecords(limit, offset);

          }
        });

      });

    </script>

    </html>
相关问题