php - onclick 追加 textarea 到 div

Question

我目前在用户按下我网页上的按钮后有一个ajax调用..

问题是，在提交之后，有一个轻微的延迟(因为第二个 ajax 调用需要完成以显示 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() 只会在文档的“就绪”事件上执行一次，而这里的 setInterval 只是绑定(bind)该事件的函数执行。

你应该改用这个结构:

$(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 字符串，否则 - “成功”函数将不会执行。

如果这没有帮助，您应该检查所有数据流以找到它们损坏的地方。在浏览器中使用开发人员控制台查看ajax请求中服务器的内容和来自服务器的内容以定位问题，然后您将能够轻松解决问题。

另外我有一些建议可以让你的代码更干净:

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

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

只需为相应的输入添加一个 id(或 class，如果你有很多按钮)属性，然后像这样:

$('#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 请求以从数据库获取数据。例如:

"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" 

这将通过减少数据库请求量来提高性能。