Question

以下代码无需jquery即可运行。

我插入数据但不会使用ajax更新。我必须刷新才能显示更新。

有人可以看看它并指出我做错了吗？

提前致谢。

Jquery就是这个。

$(document).ready(function(){
//global vars
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > ul");

//functions
function updateShoutbox(){
    //just for the fade effect
    messageList.hide();
    loading.fadeIn();
    //send the post to shoutbox.php
    $.ajax({
        type: "POST", 
        url: "index.php/admin/messages/getShoutBox", 
        // data: "action=update",
        complete: function(data){
            loading.fadeOut();
            messageList.html(data.responseText);
            messageList.fadeIn(2000);
        }
    });
}
//check if all fields are filled
function checkForm(){
    if(inputUser.attr("value") && inputMessage.attr("value"))
        return true;
    else
        return false;
}

//Load for the first time the shoutbox data
updateShoutbox();

//on submit event
$("#form").submit(function(){
    if(checkForm()){
        var nick = inputUser.attr("value");
        var message = inputMessage.attr("value");
        //we deactivate submit button while sending
        $("#send").attr({ disabled:true, value:"Sending..." });
        $("#send").blur();
        //send the post to shoutbox.php
        $.ajax({
            type: "POST", 
            url: "index.php/admin/messages/insertShoutBox", 
            data: $('#form').serialize(),
            complete: function(data){
                messageList.html(data.responseText);
                updateShoutbox();
                //reactivate the send button
                $("#send").attr({ disabled:false, value:"Shout it!" });
            }
         });
    }
    else alert("Please fill all fields!"&#41;;
    //we prevent the refresh of the page after submitting the form
    return false;
}&#41;;
});

我有以下控制器。控制器/管理/ messages.php

function getShoutBox(){
  $data['title'] = "getshoutbox";
    $data['main'] = 'admin_home';
      $data['messages']=$this->MMessages->getMessages();
    $this->load->vars($data);
    $this->load->view('dashboard'); 

}

function insertShoutBox(){
    $data['title'] = "insertshoutbox";
    $data['main'] = 'admin_home';
    $this->MMessages->updateMessage();
    $data['messages']=$this->MMessages->getMessages();
    $this->load->vars($data);
    $this->load->view('dashboard'); 

}

查看就是这个。

<form method="post" id="form" action="index.php/admin/messages/insertShoutBox" >
        <label>User</label>
        <input class="text user" name="user" id="nick" type="text" MAXLENGTH="25" />
        <label>Message</label>
        <input class="text" id="message" name="message" type="text" MAXLENGTH="255" />
        <input id="send" type="submit" value="Shout it!" />

    </form>
    <div id="container">
        <ul class="menu">
            <li>Shoutbox</li>
        </ul>
        <span class="clear"></span>
        <div class="content">
            <h1>Latest Messages</h1>
            <div id="loading"><img src="images/general/loading.gif" alt="Loading..." /></div>

            <?php
            foreach ($messages as $key => $list){

            print_r ($list);
            }
            ?>

        </div>
    </div>

Answer 1

有些事情对我来说很可疑。

您确定此网址是否正确？

url: "index.php/admin/messages/getShoutBox",

此外，这条线看起来有点可疑：

if(inputUser.attr("value") && inputMessage.attr("value"))

如果两个值均为零，您是否检查了会发生什么？（您也可以使用.val()函数代替.attr("value")）

即使它确实有效，只需要一个简单的return代替if/else就足够了：

return (inputUser.attr("value") && inputMessage.attr("value"));

Answer 2

您必须使用以下代码：

$this->load->view('dashboard', '', TRUE);

这将返回数据，而不是尝试直接将其输出到您的浏览器。

Answer 3

我在自己的网站上有一个非常相似的问题，如果不是相同的话。我试图从codeigniter生成的页面（视图）中提取div的内容，但AJAX只是失败了，而且firebug并没有给我任何线索，除了没有返回任何事实，甚至没有404错误

iainco的答案救了我，但要使其工作，你必须将codeigniter返回的数据设置为变量并手动回显。

以下是让ajax跨两个框架工作的基础知识。

jQuery的：

//setting up a global variable to make the code easier to recycle
AX = {
toLoad:'',
contentWrapper:'#content',
contentDiv:'#ajax-target'
};

//this is called on a click event I added to a DOM element that contains a link
function ajaxInit(){
    AX.toLoad = $(this).find('a').attr('href') + ' ' + AX.contentDiv;
    $(AX.contentWrapper).load(AX.toLoad,"");
}

然后是相关的codeigniter控制器或视图，假设$ content包含您要加载的视图的名称：

<div id='content'>
<div id='ajax-target'>
<?php
    //setting the third variable to true tells ci to return a data string that can be read using AJAX methods
    $content_var = $this->load->view("$content",'',TRUE);
    echo $content;
?>
</div>
</div>

注意：我在没有额外ci步骤的网站上工作，但我现在确信这是由于某种（有益的）错误，因为我无法在我的下一个项目中重现它。

我的Ajax / jquery代码不能与codeigniter一起使用

3 个答案: