$(...)。getJSON不是一个函数

时间:2017-04-24 22:43:15

标签: javascript jquery

我正在尝试开发一个简单的API调用,在JSON响应中返回我的注释,但是当我点击它时出现错误

$(...).getJSON is not a function

我的想法是,当我点击“评论”按钮(id = showarea)时,它会立即打印该答案和textarea的评论。

我在文件上“硬编码”只是为了测试。

我有这个文件(javascript / askme / comment.js)

function initCommentReloader() {
    $('#textarea').on('click', 'a', function() {
        $.getJSON("/controller/api/comments/comment.php", {answerid: answerid}, function(data) {
            $.each(data, function(i, comment) {
                console.log(comment);
            });
        });
    });
}

但是当没有任何反应时,它甚至无法识别咔嗒声, 然后我改为硬编码方式,错误发生了。我检查了我的jquery包含,所有内容似乎都包含在内。

这是我正在尝试加载评论的文件。你能找到什么问题吗?

我很抱歉,如果这是一个极端的新手,但我一直在强调这一点。

亲切的问候

 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>AskMe</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $( function() {
            $( "#tabs" ).tabs();
        } );
    </script>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/fonts/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/fonts/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/main.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/responsive.css">
    <link rel="stylesheet" type="text/css" href="{$BASE_URL}css/styles/clean-blog.min.css">

    <!-- JS -->
    <script type="text/javascript" src="{$BASE_URL}javascript/vendor/bootstrap.js"></script>
    <script type="text/javascript" src= "{$BASE_URL}javascript/Chart.js"></script>
    <script type="text/javascript" src="{$BASE_URL}javascript/main.js"></script>
    <script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

</head>


<div class="post-button clearfix">
                <button class="btn icon-chat" title="Add a comment on this answer"
                        type="submit" id="showarea" name="showarea" value="Show Textarea">
                    Comment</button>
                <div id="textarea">
                    {include file="comment.tpl"}
                    {include file="comment_form.tpl"}
                </div>
            </div>

<script>
    answerid = {$answer['answerid']};
    console.log();
    $("#showarea").click(function() {
        $("#showarea").getJSON("/controller/api/comments/comment.php", function (data) {
            console.log(data);
        });
    });
</script>
{HTML::script('askme/comment.js')}

4 个答案:

答案 0 :(得分:3)

这可能不是特定的问题,但是如果使用排除ajax,动画等的“瘦身”jQuery版本,则会出现同样令人困惑的错误。 如果“.slim”出现在包含jQuery的行中,请尝试将其取出。

另外,检查浏览器控制台以确保jQuery正确加载并且没有收到404或类似错误。

答案 1 :(得分:1)

也许改变

$("#showarea").getJSON

$.getJSON

答案 2 :(得分:1)

可能是由于jQuery版本,需要更改

$.getJSON

jQuery.getJSON

另一种选择是删除 $。getJSON 并使用 $ .ajax (根据jQuery文档) $。getJSON 是一种速记Ajax功能,相当于:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

答案 3 :(得分:1)

你可以尝试:

  $(document).on('click', '#textarea>a', function() {
        $.getJSON("/controller/api/comments/comment.php", {answerid: answerid}, function(data) {
            $.each(data, function(i, comment) {
             console.log(comment);
            });
        });
    });

  $(document).on('click', '#textarea>a', function() {
    $.getJSON( "/controller/api/comments/comment.php", {answerid: answerid})
  .done(function( data ) {
    $.each(data, function(i, comment) {
       console.log(comment);
      });
    })
  });

 $(document).on('click', '#textarea>a', function() {
  $.ajax({
  dataType: "json",
  url: "/controller/api/comments/comment.php",
  data: {answerid: answerid},
  success: success
}).done(function( data ) {
    $.each(data, function(i, comment) {
     console.log(comment);
     });
  });

});