如何在Codeigniter中将jQuery值传递给php模型函数

时间:2018-10-06 07:28:37

标签: javascript php jquery html codeigniter

我需要将jquery ID值传递到codeigniter中的est_model-> get_img()函数中,并在同一模式框中显示所有内容,我尝试了自己的逻辑,但它不起作用,请帮帮我,谢谢提前

下面是我的代码: 模态标签:

.hidden
{
  display: none;
}

#boxx {
    border: none;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    border-radius: 2px;
    height: 46px;
    outline: none;
    transition: box-shadow 200ms cubic-bezier(0.4,0.0,0.2,1);
    background-color: #fff;
    border-radius: 3px;
    border-top-color: rgb(160,160,160);
    cursor: text;
    display: inline-block;
    font: 18px arial,sans-serif;
    line-height: 36px;
    max-width: 672px;
    position: relative;
    width: 100%;
    border-bottom-left-radius: 0px;
}

#boxx>input {
    padding-left: 50px;
    padding-right: 50px;
    background: transparent;
    border: none;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    margin: 0;
    outline: none;
    position: absolute;
    /* top: 2px; */
    width: 100%;
    height: 100%;
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); */
    box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.08), -2px 0 1px -1px rgba(0, 0, 0, 0.08);
}

.gb_pf.gb_rf {
    visibility: inherit;
      background: none;
      border: none;
      outline: none;
      padding: 0 10px;
      line-height: 0;
      padding-top: 4px;
  }
  
  .clear_search .gb_pf.gb_rf {
    padding: 0px 0px;
    padding-top: 4px;
  }
  .clear_search {
    float: right;
    right: 2%;
    top: 4%;
    width: 6%;
    /* height: 46px !important; */
    color: grey;
    text-align: center;
    height: 90% !important;
    background: #fff;
    opacity: 0.54;
    cursor: pointer;
    z-index: 3;
    position: relative;
    }

我的jquery:

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
      
<div class="mb-20 mt-10" id="boxx">
    <input id="myInput" type="url" title="search" placeholder="Search" style="border-bottom: 0 !important;">

    <span class="clear_search hidden" title="clear search">
        <button class="gb_pf gb_rf" aria-label="Clear search" type="button">

            <svg class="svg-style" focusable="false" height="38px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
        </button>
    </span>
</div>

模式框:

<a href="#view_all_img_modal" data-toggle="modal" data-est-id="<?php echo $row->est_id;?>">View all</a>

1 个答案:

答案 0 :(得分:4)

您的PHP文件无法从GET请求中读取ID,除非模态框实际上为admin/est_view.php。但是我想我知道您要做什么,

步骤1:

创建一个名为admin/est_view.php的文件,该文件仅包含php脚本,该脚本将从DB和foreach clause提取数据以形成html响应,并且不要忘记它需要连接到数据库。

这是您可以使用或开发的示例:

<?php
    try{
        $pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "passwd");
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch(PDOException $e){
        die("ERROR: Could not connect. " . $e->getMessage());
    }
    try{
        if(isset($_REQUEST["ID"])){
            $sql = "SELECT * FROM images_table WHERE :ID";
            $stmt = $pdo->prepare($sql);
            $term = $_REQUEST["ID"] . '%';
            $stmt->bindParam(":ID", $term);
            $stmt->execute();
            if($stmt->rowCount() > 0){
                while($row = $stmt->fetch()){
                    echo "<img src=\"" . $row["url"] . "\">";
                }
            }
        }  
    } catch(PDOException $e){
        die("ERROR: Could not able to execute $sql. " . $e->getMessage());
    }
    unset($stmt);
    unset($pdo);
?>

第2步:

现在您可以使用自己的JS了:

$('#view_all_images_modal').on('show.bs.modal', function(e) {
    var est_id = $(e.relatedTarget).data('est-id');
    $.ajax({url:"admin/est_view.php?ID="+est_id,cache:false,success:function(result){
        $("#view_all_img_modal").html(result);
    }});

});