点击事件将文本区域添加到 div 中。

12

我目前在网页上设置了一个 button,当用户按下该按钮后会发起一次ajax调用。

问题是,在提交后会有一点延迟(因为需要完成第二个ajax调用才能显示DIV),以避免出现轻微的滞后。我想知道是否可能将内容附加到DIV中:

    <textarea name='Status'> </textarea>
    <input type='hidden' name='UserID' value="<?=$_SESSION['UserID']; ?>">
    <input type='button' value='Status Update'>
  <script>
  $(function () {
    $('input').on('click', function () {
        var Status = $(this).val();
       $('#output').append(Status);
});
  </script>

以上是我的当前代码配置。现在,它没有按预期工作。它不能将提交的内容添加到DIV中...这是通过我的ajax调用显示的方式:

window.setInterval(function()
{
  $(function () 
  {
    $.ajax({                                      
        url: 'Ajax/AjaxStatuses.php', data: "", dataType: 'json',  success: function(rows)        
        {
        $('#output').empty();
            for (var i in rows)
            {
                var row = rows[i];          
                var User = row[0];
                var Status = row[1]
                    $('#output').append(''+
                    '<div class="small-3 large-2 columns "><img src="http://placehold.it/80x80&text=[img]" /></div>'+
                    '<div class="small-9 large-10 columns">'+
                        '<p><strong><a href="#">'+User+'</a>:</strong>'+Status+'</p>'+
                        '<ul class="inline-list">'+
                            '<li><a href="">Reply</a></li>'+
                            '<li><a href="">Share</a></li>'+
                        '</ul><hr>');
            } 
        } 
    });       
  });
 }, 1000);

并且这个调用:

 include "../PHP/Database.php";
    $Array = array();

        $Query = $DB->prepare("SELECT UserID, Text FROM statuses Order BY ID DESC");
        $Query->execute();
        $Query->bind_result($ID, $Text);
        $Query->store_result();
        while($Query->fetch()){
            $Second_Query = $DB->prepare("SELECT Username FROM users WHERE ID=?");
            $Second_Query->bind_param('i',$ID);
            $Second_Query->execute();
            $Second_Query->bind_result($Username);
            $Second_Query->fetch();
                $Array[] = array ($Username, $Text);
            $Second_Query->close();         
        }
        $Query->close();

如何在按下按钮后将文本区域附加到HTML div中,以便我的脚本不必等待新发布状态的响应?


更新。当按钮提交时,它调用以下代码:

$(function () {
    $('input').on('click', function () {
        var Status = $(this).val();
        $.ajax({
            url: 'Ajax/StatusUpdate.php',
            data: {
                userid: $("input[name=UserID]").val(),
                text: $("textarea[name=Status]").val(),
                Status: Status
            },
            dataType : 'json'

        });
    });
});

处理ajax输入


2
侧记:建议不要在HTML代码中混合使用单引号和双引号。 - Raptor
如果您不想等待xhr请求的响应,请在调用之前附加div。如果您选择这种方法,则应该有一个指示正在请求数据的标志。 - BingeBoy
嗨,Sophie,您的代码中有语法错误。缺少一个结束花括号:$(function(){ $('input').on('click',function(){ var Status = $(this).val(); $('#output').append(Status); } }); - Babak Bandpay
你有没有其他按钮能正常工作? - Daryl Gill
可能只是服务器错误。 - bren
显示剩余5条评论
12个回答

1

1

这里可能存在许多问题。我将从一些调试提示开始回答,然后列出需要检查的地方。

一些调试提示:

  • 在代码中插入一些debugger;语句
  • 在Chrome中打开开发者工具,并使JavaScript通过该代码路径,例如点击一个按钮。代码将在debugger语句处停止。
  • 调查各种函数传入和传出的值。确认关于各种函数被调用以及它们接收的信息的假设。

需要检查的地方:

  • 确保你的ajax回调实际上正在运行。您从服务器获取的MIME类型应为application/json。如果您的ajax回调没有运行,那么要么是mime/response类型问题,要么是某种服务器故障。
  • 确保$('#output')返回了内容。尝试在使用其中一个debugger;语句暂停时打开Chrome控制台并输入该命令。你应该会得到一个HTML元素。
  • 您更新的代码没有告诉我在ajax调用完成后会发生任何事情。这是有意为之吗?如果您希望在此之后发生某些事情,则应指定success参数。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接