Ajax在提交时显示消息而不刷新

时间:2014-12-16 12:20:57

标签: php jquery ajax

我通过Ajax提交表单数据,并希望在成功提交时在表单上方显示一条消息。

目前,表单确实成功发送了数据。它应该在我的config.php

中定义的表单提交<?php $this->renderFeedbackMessages(); ?>上呈现反馈消息

我哪里错了?由于第一次使用mvc,可能会以错误的顺序执行操作?

我的 config.php 文件我定义了以下内容;

define("FEEDBACK_BOOK_ADD_SUCCESSFUL", "Book add successful.");

我的模型;

public function addIsbn($isbn)
{
    // insert query here  
    $count =  $query->rowCount();
        if ($count == 1) {
            $_SESSION["feedback_positive"][] = FEEDBACK_BOOK_ADD_SUCCESSFUL;
    return true;
        } else {
            $_SESSION["feedback_negative"][] = FEEDBACK_NOTE_CREATION_FAILED;
    }
    // default return
    return false;
}

我的控制器;

function addIsbn()  
{
    // $_POST info here
    header('location: ' . URL . 'admin/searchIsbn');
}

我的 searchIsbn.php ;

<?php $this->renderFeedbackMessages(); ?>

<div>
//my html form here
</div>

<div id="result"></div>

<script>
$('#form').submit(function() {

       event.preventDefault();

       var isbn = $('#isbn_search').val();

       var url='https://www.googleapis.com/books/v1/volumes?q=isbn:'+isbn;

        $.getJSON(url,function(data){

            $.each(data.items, function(entryIndex, entry){  

                $('#result').html('');

                var html = '<div class="result">';  

                html += '<h3>' + entry.volumeInfo.isbn + '</h3>';
                html += '<hr><button type="button" id="add" name="add">add to library</button></div>';  

                $(html).hide().appendTo('#result').fadeIn(1000);

                $('#add').click(function(ev) {
                    $.ajax({
                         type: 'POST',
                         url: '<?php echo URL; ?>admin/addIsbn',
                         data: {
                             'isbn' : isbn   
                         }      
                    });
                });
            });
        });
 });
</script>

没有控制台错误消息。

3 个答案:

答案 0 :(得分:2)

您正在重定向:

header('location: ' . URL . 'admin/addIsbn');

将其删除。

在此处回显成功消息,并将其添加到HTML元素的.html() API。

您的页面不会刷新。

答案 1 :(得分:0)

我能让它工作的唯一方法是为我的Ajax成功函数添加一个自动刷新,如下所示;

window.location.reload(true);

无论如何都要努力工作。

答案 2 :(得分:0)

您的信息页正在调用admin/addIsbn,该信息被重定向到admin/searchIsbn。因此,您已将renderFeedbackMessages()的输出发送到您的函数。

使用success回调将结果输出到页面:

$.ajax({
  type: 'POST',
  url: '<?php echo URL; ?>admin/addIsbn',
  data: {
    'isbn' : isbn   
  },
  success: function(data) {
    $('#result').html(data);
  }
});