Question

我有一个使用codeigniter创建的网站，现在我想在其中一个视图中集成ajax。

我已经按照本教程FormgetAjaxCodeigniter进行了操作。但是因为我使用链接并想要＆＃34;得到＆＃34;来自href而不是使用表单的信息，我无法完全使用教程中的所有信息。使用ajax我依赖的preventDefault目前对我不起作用。

主页是一个包含重要信息（ids，名称）的用户表，并且包含图像链接。我想使用ajax来获取用户的ID，获取有关该用户的所有信息，并将其显示在同一页面上的单独表格中通过从href获取id而不激活控制器功能

以下是修改过的脚本：

<script type="text/javascript">
$(document).ready(function(){
$(".idclenvidi").("click",function(e){
    e.preventDefault();

    var currentobj = this;
    var d = {id:$(this).attr('id')};
    $.ajax({
        type : 'GET',
        url : "admin_page/ajax_listclen.php",
        data : d,
        success : function(res){
            if(res){
                  jQuery("div#toptions").show();
                  jQuery("div#toption_id_ajax").html(res.id);
                }
        }
    });
});

}）;

以下是链接中的代码：

<a id="idclenvidi" title="Види сите информации за <?php echo $key['ime'].' '.$key['prezime']; ?>" href="<?php echo base_url()."admin_page/ajax_listclen?id=".$key['id']; ?>"> <img src="<?php echo base_url()."sliki/iconz/if_Search_27877.png" ?>" width="24px" height="24px"></img> </a>

以下是来自控制器的代码（ajax）

 public function ajax_listclen() {
$data = array(
'id' => $this->input->get('id')
);
echo json_encode($data);
}

当我点击上面的链接时，控制器会提交该功能，因此防止来自ajax的故障不会被触发。

由于我不能删除href，因为我需要它用于id，我也不能只将id放在那里，因为控制器需要一个函数。这个想法是ajax会阻止这种情况发生。

另外，为了确保我的链接或脚本不在我这里，我的标题包含部分：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我不知道自己做错了什么。预先感谢您的回答

Answer 1

看起来您的点击处理程序的选择器语法是错误的。

$(".idclenvidi").("click",function(e){

$(".idclenvidi")要求带有类名＆＃34; idclenvidi＆＃34;的元素。我相信你想要通过元素 id 来选择。您还需要使用.on或.click。

$("#idclenvidi").click(function(e){

或

$("#idclenvidi").on("click",function(e){

编辑以解决评论

以下是我认为问题代码中存在的所有问题。下面的示例显示了如何做我认为您正在尝试做的事情。我简化了这个例子，以保持概念清晰 - 快速。

<强>控制器

class Admin_page extends CI_Controller
{
    public function index()
    {
        $data['key'] = ['id' => 42]; //bogus data for demo purposes
        $this->load->view('prevent_v', $data);
    }

    public function ajax_listclen()
    {
        $data = $this->input->get('id');
        echo "<p><strong>$data</strong></p>"; //respond with html
    }
}

如您所见，控制器返回一个html字符串。这是一点点在ajax.success中更容易处理。如果您坚持使用json进行响应，则稍后会显示所需的更改。

我认为错误的一件事（如果我明白你想做什么）就是这一行

var d = {id:$(this).attr('id')};

我不知道这对你有用。这应该给你这个javascript对象{id: "idclenvidi"}。如果你想要的话，请相应调整我的代码。我认为你真正想发送的是$key['id']的价值，以便下面发生的事情。

视图 prevent_v.php

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="https://code.jquery.com/jquery-2.2.2.js"></script>
    </head>
    <body>
        <a id="idclenvidi" title="some title text" 
           href="<?php echo base_url("admin_page/ajax_listclen/{$key['id']}"); ?>"
           >Click Here</a>
        <div id="toptions"></div>

        <script>
            $(document).ready(function ()
            {
                $("#idclenvidi").on("click", function (e) {
                    e.preventDefault();
                    //extract the last segment of the URL
                    var val = this.href.substr(this.href.lastIndexOf('/') + 1);
                    var d = {id: val};
                    $.ajax({
                        type: 'GET',
                        url: "prevent/ajax_listclen",
                        dataType: 'html',
                        data: d,
                        success: function (res) {
                            $("#toptions").html(res);
                        }
                    });
                });
            });

        </script>       
    </body>
</html>

使用JSON ajax_listclen()成为

public function ajax_listclen()
{
    $data = ['id' => $this->input->get('id')];
    echo json_encode($data);
}

然后从ajax选项中删除dataType: 'html',。

然后将success的javascript更改为

success: function (res) {
    var ret = JSON.parse(res);
    $("#toptions").html(ret);
}

希望这可以帮助您解决这个问题。

Answer 2

不要在href中放置任何url，也可以放javascrtipt：void（0）;类似下面的内容

<a id="idclenvidi" name="idclenvidi" title="Види сите информации за <?php echo $key['ime'].' '.$key['prezime']; ?>" href="javascript:void(0);" onclick="call_ajax(<?php echo $key['id']; ?>)"> <img src="<?php echo base_url()."sliki/iconz/if_Search_27877.png" ?>" width="24px" height="24px"></img> </a>

    <script>
     call_ajax(d){
    $.ajax({
        type : 'GET',
        url : "admin_page/ajax_listclen",
        data : {id:d},
        success : function(res){
            if(res){
                  jQuery("div#toptions").show();
                  jQuery("div#toption_id_ajax").html(res.id);
                }
        }
    });
    }
    </script>

Ajax防止默认无法在codeigniter网站

2 个答案: