Question

获取使用ajax生成的div中文本的长度

2016-12-05

408

php jquery ajax

我的 .php 文档包含大量字符串数组。我的页面从中取出一个字符串，并将其放入名为 post 的空 div 中。当我想获取帖子的长度时，它总是：

Uncaught TypeError: Cannot read property 'length' of undefined

因此，我假设我的 jQuery 代码读取 <div class="post"></div> ，它是空白的，直到网站加载并在其中生成文本。那么，如何从我的 post.php 文档中获取生成的字符串的长度？

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
      function getPost()
      {
        $.ajax({
          type: 'POST',
          url: 'posts.php',
          dataType: 'html',
          cache: false,
          success: function(result) {
            $('.post').html(result);
          },
        });
      }
      getPost();
    </script>
  </head>
  <script>
    var postPoints = $(".post").val().length;
  </script>
  <body>
    <div class="post"></div>
  </body>
</html>

posts.php

<?php
    $posts = array(
      "string1",
      "string2",
      "string3",
      "string4"
    );

    $maxPosts = sizeof($posts);
    $generatePost = rand(0,$maxPosts);
    if($lastPost != $generatePost)
    {
      echo $posts[$generatePost];
      $lastPost = $generatePost;
    }
    else
    {
      $generatePost = rand(0,$maxPosts);
      echo $posts[$generatePost];
      $lastPost = $generatePost;
    }
?>

Answer 1

首先，脚本 var postPoints = $(".post").val().length; 根本找不到帖子 div，这就是为什么您会收到 undefined 错误消息：

Uncaught TypeError: Cannot read property 'length' of undefined

这是因为您试图在页面完全加载之前获取 div（可以使用 ready 函数修复）：

$(function(){
    var postPoints = $(".post").val().length;
})

这样，脚本将找到您的 div 但它将始终返回“0” 。

因此，您应该在获得 ajax 请求的响应后获得 length ，您必须将您的行放在成功回调中：

success: function(result) {
    $('.post').html(result);
    alert( $(".post").val().length );
},

希望这对您有所帮助。

Answer 2

function getPost()
{
$.ajax({
        type: 'POST',
        url: 'posts.php',
        dataType: 'html',
        cache: false,
        success: function(result) {
            $('.post').html(result);
            var length = result.length; //for further uses, you may also assign this value with global variable.
        },
    });
}