Question

我试图理解在我的CodeIgniter应用程序中实现AJAX查询的过程。目标是在视图中具有可单击的分区（按钮）。单击此div时，将调用AJAX查询并从我的数据库中检索5部电影并在视图中显示它们。现在我有一个带搜索按钮的主页面，这个搜索按钮通过ID命令我的数据库，然后从数据库中检索前5部电影并将它们显示在新页面上。我试图实现的功能应该检索接下来的5部电影并替换前5部电影而不重新加载页面。

以下是我认为你应该看一看的所有代码，因为它的必要性。在代码的每个部分下面都提供了一个简短的摘要。最后，我试着解释一下我不理解的内容以及我要求你帮助的内容。

主页 - 控制器 xampInstallFolder / htdocs / application / obs / controllers / main.php

public function generate_suggestions() {

$this->db->order_by("id","desc");
$pages = $this->db->query('SELECT * FROM movies LIMIT 5');          
$data['pages'] = $pages;
$this->load->view('results_v', $data);
}

单击主页面上的Search按钮时，将调用此函数。现在它不接受查询的任何条件，它只检索数据库中的前5部电影。然后我拍摄电影并将它们存储在pages数组中，并使用data

中提供的数组加载新视图

结果页面 - 查看 * xampInstallFolder / htdocs / application / obs / views / results_v *

<div id="listA">
  <table>
    <!-- Function that splits the array in $pages into the first 5 movie suggestions -->
    <?php foreach ($pages->result() as $row): ?>
      <a style="display:block" href="<?php echo base_url('core/detail/'.$row->id) ?>">
        <div id="suggested" onmouseover="" style="cursor: pointer;">
          <div id="info">  
              <p><b><?php echo $row->name ?></b></p>
          </div>
          <div class="details">
                <p><?php echo $row->summary ?></p>
          </div>
        </div    
      </a>    
    <?php endforeach; ?>
  </table>
</div>

<div id="next_btn" style="display: block;">
  <p>Click here to display next 5 movies</p>         
</div>

我有一个div listA，我在pages数组的每个循环中使用a显示5部电影。我有更多的div和信息，但我试图保持简单。

Javascript xampInstallFolder / htdocs / ASSETS / obs / js / myscripts.js

$( "#next_btn" ).click(function() {

    var xmlhttp;

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("listA").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getnext5.php?q="true);
    xmlhttp.send();

});

在我的results视图的头部，我将javascript与此功能相关联。它在单击next_btn div时触发。我从 w3schools 获得了代码，根据我的理解，您需要提供显示结果的元素（listA）和存储查询的文件（{{1} }

getnext5.php 我在哪里放这个文件？

getnext5.php)

这是核心功能。我试图调整 w3schools 中的代码，但我不确定它是否正确。我的数据库名为obs2，但我不确定是否应该在$con = mysqli_connect('localhost','root','root','obs2'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"obs2"); $sql="SELECT * FROM user WHERE id > 5"; $result = mysqli_query($con,$sql); echo "<table>"; while($row = mysqli_fetch_array($result)) { <a style="display:block" href="<?php echo base_url('core/detail/'.$row->id) ?>"> <div id="suggested" onmouseover="" style="cursor: pointer;"> <div id="info"> <p><b><?php echo $row->name ?></b></p> </div> <div class="details"> <p><?php echo $row->summary ?></p> </div> </div } echo "</table>";和mysqli_connect语句中使用它。我也知道我必须弄清楚如何让它总是加载列表中的下5部电影，但是现在我只强制它mysqli_select_db。然后我有id>5的风格。我认为$result和`while循环编码正确，但我不知道如何将div，锚点和原始php回声转换为相同的语法。

如果你这样做，那么非常感谢你阅读。我说我需要帮助的唯一部分是table。主要是语法。 和位置，getnext5.php文件应该存储在哪里？我不认为代码的其他部分是错误的。但很明显，如果你发现任何东西，请告诉我。再次感谢阅读。我期待着你的回复。如果您需要任何其他信息，只需要它添加它。

Answer 1

我只阅读了最后一个脚本，并纠正了你犯的一些错误。您可以将该文件放在任何地方。您可以复制代码并将其粘贴到控制器类或视图页面中。

<?php // I just decided to start here

mysqli_select_db($con,"obs2");
$sql="SELECT * FROM user WHERE id > 5"; # This is an integer, no quotes necessary.

$result = mysqli_query($con,$sql);

echo "<table>";

while($row = mysqli_fetch_array($result))
{ 
?> <!-- Note how we stop php right before we start printing html, since you have nested php tags throughout this block of markup -->

      <a style="display:block" href="<?=base_url('core/detail/'.$row->id)?>">
        <div id="suggested" onmouseover="" style="cursor: pointer;">
          <div id="info">  
              <p><b><?=$row->name?></b></p>
          </div>
          <div class="details">
                <p><?=$row->summary?></p> <!-- Protip, you may use <? and ?> instead of <?php and ?>. You may also use <?= as a shortcut to the "echo" function -->
          </div>
        </div>    
 <?php 
} // We are opening up our PHP tags again
echo "</table>";
?>

Answer 2

似乎你的代码遍布整个地方。我没有具体回答你的问题，而是会给你一些建议，告诉你如何更容易地使用AJAX和codeigniter。我并不是说这是最好的解决方案，但它更有条理，更清洁你所发生的事情。希望它会指出你正确的方向。

让我们从后端开始，然后向前移动。

首先，控制器中查询数据库中电影的方法。请注意参数，这些参数允许我们要求任何电影子集，而不仅仅是前5个。（是的，我只包括重要的代码行而不是所有内容。）

public function generate_suggestions($start = 0, $count = 5) {

    $pages = $this->db->query('SELECT * FROM movies LIMIT ' . $start . ',' . $count);

    // send back the view as a simple HTML snippet (the <table>, perhaps?)
}

现在我们需要一些可以在服务器上调用此函数的Javascript。由于该函数发回了一个HTML代码段，我们可以将该代码段的html代码粘贴到页面中。 JQuery使所有这一切变得非常简单，因此您可以避免复杂的XMLHttpRequest内容。

<script type="text/javascript">
    var nextstart = 6;
    var movies_per_page = 5;

    $( "#next_btn" ).click(function() {

        // this next line makes the ajax call for us, and the inline function
        // is called when the response comes back from the server

        $.get("controller/generate_suggestions/"+nextstart+"/" + movies_per_page,
        function(data) {

            // data is what comes back from the ajax call
            // here it is the snippet of html, so let's display it as is   
            $( "#listA" ).html(data);

            nextstart += movies_per_page; // so that the next click will load the next group of movies
        });
    });
</script>

现在我们只需要在页面首次加载时填充表格，您可以通过在页面加载时使用类似的$ .get ajax调用调用相同的ajax调用来完成此操作。

一旦你理解了所有这些并让它工作，那么你应该研究JSON，因为它是一种用ajax传输数据的更好的方法。而jQuery也使得使用JSON变得更加容易。

如何在CodeIgniter中实现AJAX？

2 个答案: