onclick将textarea附加到div

Question

用户按下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输入

Answer 1

苏菲.

首先,看看这个片段.

window.setInterval(function()
{
  $(function () 
  {
      ...   
  });
 }, 1000);

我猜这是jQuery :)这个结构

$(function() { somecode(); }); 

用于执行somecode(); 当DOM达到"就绪"状态时.这意味着 - somecode()只会在文档的"ready"事件上执行一次,而setInterval就会绑定该事件的函数执行.

你应该使用这种结构:

$(function () 
{
    window.setInterval(function()
    {

        somecode();

    }, 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();

实际上,这不会发送任何回复.如果这是所有代码,那么您应该添加

echo json_encode($Array); 

至少,得到任何回应.

第三:

$.ajax({  
    url: 'Ajax/AjaxStatuses.php', data: "", dataType: 'json', ....

dataType:'json'表示您应该从服务器发送有效的JSON字符串,否则 - "success"函数将不会执行.

如果这没有帮助,您应该检查所有数据流以找到它们被破坏的位置.在浏览器中使用开发人员控制台查看服务器和服务器中的ajax请求以查找问题,然后您就可以轻松解决问题.

我也有一些建议让你的代码更干净:

尝试为这样的事情制作更具体的选择器:

$('input').on('click', function () {

只需为相应的输入添加一个id(或类,如果你有很多按钮)属性,并使其像:

$('#id').on('click', function () { ...

要么

$('.class').on('click', function () { ...

另外))尝试提取如下内容:

<input type='hidden' name='UserID' value="<?=$_SESSION['UserID']; ?>">

超出HTML结构,如果这不在表单内或您使用ajax.我看,你在js中使用UserID,所以这里有更好的解决方案

<script type="text/javascript">
   var UserID = "<?=$_SESSION['UserID']; ?>";
</script>

请注意,这只是更好,但不是最佳的.谷歌"将变量从php传递给js"并选择最佳解决方案:)

最后一个: 尝试发出单个SQL请求以从DB获取数据.例如:

"SELECT UserID, Text FROM statuses Order BY ID DESC" 

和

"SELECT Username FROM users WHERE ID=?" 

你可以替换为:

"SELECT statuses.UserID, statuses.Text, users.Username
FROM statuses 
INNER JOIN users ON users.ID = statuses.UserID
Order BY ID DESC" 

这将通过减少DB请求的数量来改善性能.

Answer 2

似乎$('#output')缺少了。添加到您的 HTML 中：

<div id="output"></div>

如果是这种情况，您会注意到开发者控制台中存在 JavaScript 错误。