如何在Codeigniter中通過Ajax獲取帖子價值

Question

我試圖接收Ajax響應，但響應為null。

我的HTML看起來像這樣

<form method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
        <select class="form-control" class="form-control" id="choose_country">
                            <option value="">Select a prefered language</option>
                            <option value="en">EN</option>
                            <option value="fr">FR</option>
                            <option value="de">DE</option>
                            <option value="nl">NL</option>
                        </select>
                        </form>


<div id="table_load"></div>  <!-- loads search table -->

我的Javascript看起來像這樣

    <script>
    $('#table_load').load('<?php echo base_url(); ?>admin/manage_article/search');

          $("#choose_country").change(function(){
            var choose_country = $("#choose_country").val();
            $.ajax({
            url: "<?php echo base_url(); ?>admin/manage_article/search",
            type: "post",
            data: {choose_country: choose_country},
            dataType: 'json',
            async: false,
            success: function (response) {
                if(response.success == true){
alert('success');
            $('#table_load').load('<?php echo base_url(); ?>admin/manage_article/search');
                }else{
                    alert('fail');
                    }
            },
            });
          });
    </script>

我的控制器看起來像這樣

public function search(){   

            $choose_language = $this->input->post('choose_country');    

            $this->load->view('admin/manage_article/search');

        }
    }

我想將選擇框的值傳遞給控制器​​，然后返回頁面$ this-> load-> view（'admin / manage_article / search'）;中的選定值；

我已經嘗試了上面的代碼，但是響應警報“失敗”。

我是ajax的新手，所以如果編碼中有任何錯誤，請原諒。

Answer 1

在您的控制器中嘗試一下

public function search() {
    $choose_language = $this->input->post('choose_country');
    $result = ($choose_language) ? true : false;
    $this->output->set_content_type('application/json')->set_output(json_encode(array('choose_country' => $choose_language, 'result' => $result)));
}

您的jQuery將如下

<script type="text/javascript">
    $(document).ready(function() {
        $("#choose_country").change(function() {
            var choose_country = $("#choose_country").val();
            $.ajax({
                url: "<?php echo base_url(); ?>admin/manage_article/search",
                type: "post",
                data: {
                    choose_country: choose_country
                },
                dataType: 'json',
                async: false,
                success: function(response) {
                    if (response.result) {
                        alert('success');
                        $('#table_load').html(response.choose_country);
                    } else {
                        alert('fail');
                    }
                },
            });
        });
    });
</script>

我不知道您為什么要使用ajax，您可能在控制器中有業務邏輯，但未顯示。 如果不是，則可以簡單地將table_load的choose_country值加載到下表中。

<script type="text/javascript">
    $(document).ready(function() {
        $("#choose_country").change(function() {
            var choose_country = $("#choose_country").val();
            $('#table_load').text(choose_country);
        });
    });
</script>

Answer 2

沒有理由對服務器進行兩次調用-一次調用ajax，然后再次加載html。

要通過AJAX返回HTML並將其加載到瀏覽器中，請在JavaScript中執行此操作。

$("#choose_country").change(function () {
    var choose_country = $("#choose_country").val();
    $.ajax({
        url: "<?php echo base_url('admin/manage_article/search'); ?>",
        type: "post",
        data: {choose_country: choose_country},
        dataType: 'html', 
        // Forcing synchronous strongly discouraged, 
        // as it can cause the browser to become unresponsive.
        //async: false, 
        success: function (response) {
            $('#table_load').html(response);
        },
        error: function(xhr, textStatus, errorThrown){
            console.log(textStatus, errorThrown);
        }
    });
});

您的控制器將按照您在問題中顯示它的方式工作，除非我看不到在哪里使用發布的var，因此您可能不會收到想要的語言特定的html（如果您要這樣做）。

如果您真的覺得需要返回包含一個名為result的屬性，您可以使用if (response.result) {...進行檢查if (response.result) {...那么您將需要對parth的問題做出回答。 您可以在控制器中將此html添加到返回的json中。

public function search()
{
    //What do you do with this?
    //You don't show how this is used so I'm mostly going to ignore it.
    $choose_language = $this->input->post('choose_country');

    $result = !empty($choose_language) ? true : false;

    ///get the view file as a string of html markup
    $html = $this->load->view('admin/manage_article/search', NULL, TRUE);
    $out = array('result' => $result, 'html' => $html);
    $this->output
        ->set_content_type('application/json')
        ->set_status_header('200')
        ->set_output(json_encode($out));
}

那么你的success功能就是這樣

success: function(response) {
    if (response.result === true) {
        alert('success');
        $('#table_load').html(response.html);
    } else {
        alert('fail');