Question

我在CodeIgniter工作，我正在尝试吐出表格中的所有项目，并按照他们应该使用下拉列表的顺序排序。我希望它在没有页面重新加载和没有提交按钮的情况下发生，所以我使用这个jQuery函数立即做出反应，当它被更改时：

$(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中，我接收所选的选项并为MySQL查询（放置在模型中）的结果分配变量（$data['people']），以便能够使用视图访问它。这个 - $_POST['val']表示，我如何订购列表（select * from people order by $theorder"（$ theother只是查询函数中的一个变量。它收到$_POST['val']）的值。）

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

之后我在视图中接收了这个变量，并且我正在运行foreach循环来获取数组的不同部分（人的名字，他的年龄等等）并将它放在它们应该的位置。

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

创建布局

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

但那也是失败......

我应该如何组织和创建代码以使一切正常运行？

我是Ajax的新手，所以我希望我能真正学会如何做到这一点。我已经在整个互联网上搜索并看过很多ajax教程和其他类型的材料（例如StackOverflow），但我仍然无法获得，我怎么能在我的特定情况下完成所有这些。我已经浪费了大约12个小时试图解决问题并且无法做到这一点，所以我希望你能告诉我是否有任何有用的救赎。

感谢您的考虑。

Answer 1

你好，你需要3个部分来制作ajax，

用于生成页面的服务器端代码
ajax（clientside）进行通话并回复
单独的服务器端接收它。

同样更容易完全更换表格然后挑选元素。但这取决于你。

所以说我们有一个带有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 ...) .. );

在做回声之前，告诉服务器这是json是很重要的，你使用标题执行此操作，但是你不能在标题之前输出任何内容，并且在json标题之后所有输出都必须在json格式或它不起作用，它就像告诉浏览器这是html，或图像等内容是什么。

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

你有时可以不用这样做，但通常你需要使用eval或其他东西，告诉浏览器你不需要它。现在发出警报非常棒，除非您看到字符串数据[{"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>

Ajax和PHP交互的轻微困难

1 个答案: