javascript - Ajax 和 PHP 交互的小困难

Question

我在 CodeIgniter 工作，我试图吐出表格中的所有项目，并按照它们应该使用下拉列表的方式对它们进行排序。我希望它在没有页面重新加载和提交按钮的情况下发生，所以我使用这个 jQuery 函数在更改时立即使用react:

$(document).ready(function() {
    $(".order-by-select").click(function() {var orderValue = this.value;
    $.post("<?php echo base_url() ?>welcome/index", {val: orderValue}, function(data) {
        alert(data);
    });
});

在里面你可以看到 $.post 方法，我试图用它发送数据到 php 脚本(orderValue)。 之后，我收到警报(甚至不确定，为什么我需要它(也许是为了检查那里是否一切正常))

在 PHP 中，我收到所选的选择选项，并将变量 ($data['people']) 分配给 MySQL 查询的结果(放置在模型中)，以便能够在 View 中访问它。这 - $_POST['val'] 表示，我如何订购列表(select * from people order by $theorder" ($theother 只是查询函数。它接收 $_POST['val'])) 的值。

if(isset($_POST['val'])) {
    $data['people'] = $this->database->listPeople($_POST['val']);
    exit;
}

之后，我在 View 中接收到这个变量，然后运行 ​​foreach 循环来获取数组的不同部分(人名、年龄等)并将其放置在应有的位置。

问题是 - 如果我在没有 ajax 的情况下执行此操作，当我按值进行静态排序时 - 一切正常。我并不是说这是问题:D，问题基本上是它不适用于ajax...我试图在js回调中接收数组并使用

创建布局

$.each(eval(data), function() {
  $('#container').text('<div>' + eval(res).name + '</div>');
});

但这也是失败的......

我应该如何组织和创建我的代码以使一切正常工作？

我对 Ajax 还算陌生，所以我希望能真正向你们学习如何做到这一点。我已经搜索了整个互联网，并看到了很多 ajax 教程和其他类型的 Material (例如 StackOverflow)，但我仍然不明白，在我的特定情况下如何才能做到所有这些。我已经浪费了大约12个小时试图解决这个问题，但无法做到这一点，所以我希望你能告诉我是否有任何有用的拯救。

感谢您的考虑。

Answer 1

嗨，最重要的是你需要 3 个部分才能使 ajax 工作，

• 用于生成页面的服务器端代码
• ajax(客户端)进行调用并响应
• 单独的服务器端来接收它。

此外，完全替换表格然后挑选元素会更容易。但这取决于你。

假设我们有一个带有 ajax 调用的页面

 <script type="text/javascript" >
 $(document).ready(function() {
    $(".order-by-select").click(function() {var orderValue = this.value;
    $.post("<?php echo base_url() ?>welcome/index", {val: orderValue}, function(data) {
        alert(data);
    });
});
</script>

现在你似乎有一些 json 响应，我假设你从上面的警报中得到了这个响应；

 [{"id":"1","name":"Nick","age":"18"},{"id":"2","name":"John","age":"23"}]

我还会假设这来自类似

echo json_encode( array( array('id'=>1, ...), array('id'=>2 ...) .. ); 

在执行 echo 之前，请务必告诉服务器这是 json，您可以使用 header 来执行此操作，但在 header 之前不能输出任何内容，并且在 json header 之后，所有输出都必须采用 json 格式，或者它不起作用，就像告诉浏览器这是 html，或者图像等内容是什么。

  Header("Content-Type: application/json");
  echo json_encode( ....

有时你可以不这样做，但通常你需要使用 eval 或其他东西，通过告诉浏览器它的 json 你不需要它。现在做一个警报很棒，但是如果你看到字符串数据 [{"id": .. 你的标题是错误的，你应该得到类似 [object] 的东西当您执行警报时。

一旦我们有了一个真实的 Json 对象，我们就可以利用所有这些精彩的数据

<script type="text/javascript" >
 $(document).ready(function() {
    $(".order-by-select").click(function() {var orderValue = this.value;
    $.post("<?php echo base_url() ?>welcome/index", {val: orderValue}, function(data) {
        $.each(data, function(i,v){
            alert(v.id);
            alert(v.name);
        });
    });
});
</script>

这应该循环遍历所有数据并执行 2 个警报，首先是 id，然后是名称，对吧。接下来，使用 .text() 或 .append()

替换内容很简单

  <script type="text/javascript" >
 $(document).ready(function() {
    $(".order-by-select").click(function() {var orderValue = this.value;
    $.post("<?php echo base_url() ?>welcome/index", {val: orderValue}, function(data) {
        $.each(data, function(i,v){
           $('#test').append('<p>'+v.id+'</p>');
        });
    });
});
</script>

<p id="test" ></p>