Question

我正在尝试使用建议的结果作为下拉列表进行Ajax搜索，当我输入内容时，我总是收到错误“请求时出错..”并且控制台显示连接拒绝视图中的帖子URL。

控制器：

function index(){
    $this->load->model('Master_model');
    $search= $this->input->post('search');
    $query = $this->Master_model->getAirportName($search);
    echo json_encode ($query);
    $this->load->view('Master_view'); 
}

型号：

  function getAirportName($search){
    $this->db->select('*');
    $whereCondition = array('AirportName'=>$search);
    $this->db->where($whereCondition);
    $this->db->from('Airports');
    $query = $this->db->get();
    return $query->result();
  }

查看：

<script>
    $(document).ready(function(){
      $("#search").keyup(function(){
        if($("#search").val().length>3){
        $.ajax({
            type: "post",
            url: "http://localhost/flightstats/index.php/Master_controller",
            cache: false,               
            data:'search='+$("#search").val(),
            success: function(response){
                $('#finalResult').html("");
                var obj = JSON.parse(response);
                if(obj.length>0){
                    try{
                        var items=[];   
                        $.each(obj, function(i,val){                                            
                            items.push($('<li/>').text(val.AirportName + ", " + val.AirportCountry));
                        }); 
                        $('#finalResult').append.apply($('#finalResult'), items);
                    }catch(e) {     
                        alert('Exception while request..');
                    }       
                }else{
                    $('#finalResult').html($('<li/>').text("No Data Found"));       
                }       

            },
            error: function(){                      
                alert('Error while request..');
            }
        });
        }
        return false;
      });
    });
</script>



<div id="container">
<p>Type an airport</p>
<input type="text" name="search" id="search" />
<ul id="finalResult"></ul>
</div>

Answer 1

如果我了解您的问题，您不应该为AJAX响应加载视图。只需echo json_encode($value)。但是，如果您将所有代码 - 常规视图和ajax响应放在同一方法中，则应检查ajax调用 $this->input->is_ajax_request()，例如：

public function index()
{
    if ($this->input->is_ajax_request())
    {
        //get data from DB and echo json
    }
    else
    {
        //do initial page load
    }
}

虽然如果ajax与初始视图代码隔离开来，检查代码会更容易。

Answer 2

你的问题是你的ajax函数和控制器是一个，你应该将它分成两个函数，一个是带输入的显示形式，一个是返回json结果。

这是一个例子：

控制器： Master_controller.php

public function index(){
    $this->load->view('Master_view'); 
}

public function ajax(){
    $this->load->model('Master_model');
    $search= $this->input->post('search');
    $query = $this->Master_model->getAirportName($search);
    echo json_encode ($query);
}

型号： Master_model.php

public function getAirportName($search){
    $this->db->where('AirportName',$search);
    $this->db->from('Airports');
    $query = $this->db->get();
    return $query->result();
  }

查看： Master_view.php

<!DOCTYPE html>
<html>
    <head>
        <title>Test ajax</title>
    </head>
    <body>
        <form method="post" name="frmTestAjax">
            <input type="text" name="search" id="search" placeholder="Type some text right here" style="padding: 5px 10px" />
            <ul id="finalResult"></ul>
        </form>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#search").keyup(function() {
                    if ($("#search").val().length > 3) {
                        $.ajax({
                            type: "post",
                            url: "http://localhost/flightstats/index.php/Master_controller/ajax",
                            cache: false,
                            data: 'search=' + $("#search").val(),
                            success: function(response) {
                                $('#finalResult').html("");
                                var obj = JSON.parse(response);
                                if (obj.length > 0) {
                                    try {
                                        var items = [];
                                        $.each(obj, function(i, val) {
                                            items.push($('<li/>').text(val.AirportName + ", " + val.AirportCountry));
                                        });
                                        $('#finalResult').append.apply($('#finalResult'), items);
                                    } catch (e) {
                                        alert('Exception while request..');
                                    }
                                } else {
                                    $('#finalResult').html($('<li/>').text("No Data Found"));
                                }

                            },
                            error: function() {
                                alert('Error while request..');
                            }
                        });
                    }
                    return false;
                });
            });
        </script>
    </body>
</html>

P / s：对不起，我的英语太差了。我试图改进它：）

Codeigniter AJAX搜索返回错误

2 个答案: