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"

这将通过减少数据库请求的数量来改善性能。

Answer 2

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

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

如果是这种情况，您会注意到Developer Console中存在JavaScript错误。

Answer 3

您似乎没有读取要追加的正确数据。您正在读取input元素，但您应该从textarea中读取。

看看这个，非常基本： http://jsfiddle.net/ABFV9/

所以你想要的是通过以下方式从textarea获取提交的数据：

var getText=jQuery("[name='Status']").val();

Answer 4

不要让表单自动“点击”（您可以从表单属性中删除操作字段）。让AJAX调用发生，并在ajax调用中添加$("#YourFormIdHere").submit();作为成功回调函数的最后一行（在此处为你的for循环）。它应该工作。

Answer 5

当你调用statusupdate查询时，你应该返回用JSON编码的用户和状态，然后你函数中的一个callBack JQuery允许解码JSON并附加到你的div

1）in statusupdate.php

return json_encode('status:{'.$Array.'});

2）JQuery中的callBack

$.ajax{(
)}.done(function(status) {
  var status = jQuery.parseJSON(status);
  Userstatus = status.text;
  UserName = status.username;
});

3）$('#output').append('<div class="status"><span>'+User +':</span><a href="#">'+UserName+'<span><strong>'+Userstatus+'</strong></span></div>');

Answer 6

您确定在同步或异步AJAX请求之间使用了正确的请求类型吗？

对于同步请求，您正在等待服务器的回复。因此，在某些情况下，您可能会超时并且没有响应。
使用异步请求，您不会等待回复。当服务器回复时，将处理响应。

查看其他帖子：jQuery: Performing synchronous AJAX requests

希望有所帮助。

Answer 7

你需要什么setInterval？

尽可能简单地回答你的问题。要将textarea附加到div，您需要将单击事件绑定到按钮。如果你想轻松地做到这一点，你可以这样写：

<script>
$(function (){
  $("#btn_append").click(function (){
     //$("#output").html($("#mytext").val()); //overwrite text
     $("#output").append($("#mytext").val()); //append text
  });
});
</script>
<input type="button" id="btn_append" value="append" />
<textarea id="mytext"></textarea>
<div id="output"></div>

看看文档reaady函数$(function (){})我已经在开头声明了它，你在setInterval中多次声明它。您还需要查看命名约定，因为您的名称彼此相似，这使代码难以调试。

你写过关于延迟的文章。很明显存在延迟，因为它们是AJAX所代表的异步方法。你总是可以进行同步通话，你只需要传递给$.ajax(); param async:false，但我不推荐它。

Answer 8

从数据库返回了多少个状态？

我假设您有正确的代码（结合此处发布的先前答案）并且仍然存在延迟。它可能是由setInterval中的ajax调用引起的 - 将新状态追加到#output之后，它被click事件之前触发的请求覆盖。

要防止您在单击按钮时中止xhr请求并清除间隔功能：

$(function(){


    // interval reference and jQuery XHR object
    var ajaxInterval, jqxhr;

    // initialize fetching data from server
    function startPolling() {
        stopPolling();
        ajaxInterval = setInterval( function() {
            jqxhr = $.ajax({                                      
                url: location.href, 
                data: {ajax: 1}, 
                dataType: 'json',  
                type: "GET",
                success: function(result)        
                {
                    // parse result and insert into #output
                    // ...
                } 
            });     
        }, 1000);
    }

    // clear interval and abort xhr request
    function stopPolling() {
        if(ajaxInterval)
            clearInterval(ajaxInterval);
        if(jqxhr)
            jqxhr.abort();
    }


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

        // this prevents overwriting from old ajax call
        stopPolling();

        // insert into #output our new status
        var getText=jQuery("[name='Status']").val();
        $('#output').append('<div>'+getText+'</div>');

        // post status into server
        $.ajax({                                      
            url: location.href, 
            data: {ajax: 1, status: $("[name='Status']").val()}, 
            dataType: 'json',  
            type: "POST",
            success: function(result)        
            {
                // parse result and insert into #output here
                // ...

                // restart fetching data
                startPolling();
            } 
        });     
    });

    // start fetching data
    startPolling();
});

这是一个关于phpfiddle的javascript（有xhr请求）的简单演示： http://phpfiddle.org/lite/code/hn0-0e1

但我想知道每个请求中会提取多少个状态？将已经获取的状态存储在变量中并且只加载比我们已有的最后一个更新的状态会不会更好？就像facebook一样 - 当你打开墙壁时，它不会每隔X秒重新加载整个墙壁，而只是获取自上次调用以来添加的状态。

只是一个简单的想法：

$(function(){


    // interval reference and jQuery XHR object
    var ajaxInterval, jqxhr;
    var statuses = [];

    // initialize fetching data from server
    function startPolling() {
        stopPolling();
        ajaxInterval = setInterval( function() {

            // get the newest stored id
            var lastStatusId = 0;
            if(statuses.length)
                lastStatusId = statuses[0].id;

            jqxhr = $.ajax({                                      
                url: location.href, 
                data: {ajax: 1, lastStatusId: lastStatusId}, 
                dataType: 'json',  
                type: "GET",
                success: function(result)        
                {
                    if(result.updateStatuses) {
                        // prepending the latest statuses to our variable
                        statuses = result.statuses.concat(statuses);
                        // merge repaint output
                        displayStatuses();
                    }
                } 
            });     
        }, 1000);
    }

    // clear interval and abort xhr request
    function stopPolling() {
        if(ajaxInterval)
            clearInterval(ajaxInterval);
        if(jqxhr)
            jqxhr.abort();
    }


    function displayStatuses() {
        var $output = $('#output');
        $output.empty();

        // parse statuses array of objects and 
        // insert the result in the #output
        // ...
    }


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

        // this prevents overwriting from old ajax call
        stopPolling();

        // insert into #output our new status
        var getText=jQuery("[name='Status']").val();
        $('#output').append('<div>'+getText+'</div>');

        // get the newest stored id
        var lastStatusId = 0;
        if(statuses.length)
            lastStatusId = statuses[0].id;

        // post status into server
        $.ajax({                                      
            url: location.href, 
            data: {ajax: 1, status: $("[name='Status']").val(), lastStatusId: lastStatusId}, 
            dataType: 'json',  
            type: "POST",
            success: function(result)        
            {
                if(result.updateStatuses) {
                    // prepending the latest statuses to our variable
                    statuses = result.statuses.concat(statuses);
                    // merge repaint output
                    displayStatuses();
                }

                // restart fetching data
                startPolling();
            } 
        });     
    });

    // start fetching data
    startPolling();
});

所以你的php代码应该是这样的：

    $Query = $DB->prepare("SELECT Statuses.ID, Text, Username FROM statuses, users WHERE Username.ID = statuses.UserID AND statuses.ID > ? ORDER BY Statuses.ID DESC");
    $Query->bind_param('i',intval($_REQUEST['lastStatusId']));
    $Query->execute();
    $Query->bind_result($ID, $Text, $Username);
    $Query->store_result();
    $Array = array();
    while($Query->fetch()){
         $Array[] = array ('id'=>$ID,'username'=>$Username, 'text'=>$Text);
    }
    $Query->close();

    // are there any new statuses?
    $result['updateStatuses'] = false;
    if( count($Array) )
        $result['updateStatuses'] = true;

    $result['statuses'] = $Array;
    echo json_encode($Array);

Answer 9

我从你的代码中做了working demo。希望它可以解决你的问题。无论如何，我建议你花点时间阅读jQuery和JavaScript编码风格。

首先，我们将修复在您点击按钮后应更新状态的代码：

<!-- TEXTAREA that we will update --> 
<textarea name='Status'> </textarea>

<!-- I didn't saw output DIV in your code. It should be present in HTML -->
<div id='output'></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>

 $(function(){

   // 1. Update on click:
   $('input').on('click', function () {

       var Status = $(this).val();

       // append content to the DIV
       $('#output').append(Status);

       // save content to the TEXTAREA
       $('textarea').val(Status);
   });

 }

</script>

制作AJAX请求的代码看起来也不是很好，并且几乎可以正常工作。我对它做了一些改动：

<textarea id='status' name='Status'> </textarea>
<div id='output'></div>
<input type='button' value='Status Update'>

<script id="AjaxStatusesTemplate" type="text/template">

  <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/>
   </div>

</script>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>

    // 2. Update by timer with 1 second delay: 
    function UpdateOutputWithAjaxStatuses(){
        var htmlTemplate = $('#AjaxStatusesTemplate').html();
        $.ajax({ url: 'http://your-server.com/Ajax/AjaxStatuses.php', data: '', dataType: 'json',
          success: function(rows){
            $('#output').empty();
            for (var i=0, row=rows[i]; i<rows.length;i++)
            {     
              var User = row[0];
              var Status = row[1];

              var html = htmlTemplate
                           .replace('{{User}}', User)
                           .replace('{{Status}}', Status);

              $('#output').append(html);
            } 
          },
          error: function(){
              var now = new Date();
              $('#output').html('error at '+now);
          },
          complete: function(){
            setTimeout(UpdateOutputWithAjaxStatuses, 1000);
          }
        });       
    }

    // comment next line to stop autostart for ajax request scheduler
    UpdateOutputWithAjaxStatuses();

</script>

您可以在此处找到工作示例： http://jsfiddle.net/vmysla/XWuDf/6/

（您应该更改AJAX请求的URL以使其正常工作）

Answer 10

这里可能存在许多问题。我将从一些调试技巧开始这个答案，然后是一个要检查的地方列表。

一些调试技巧：

在您的代码中抛出一些debugger;语句
打开了开发人员工具并让你的javascript通过该代码路径，例如点击一个按钮。代码将在调试器语句处停止。
调查传入和传出各种函数的值。确认有关被调用的各种功能的假设以及他们接收的信息。

要检查的地方：

确保您的ajax回调实际上正在运行。您服务器上的mime类型应该是application / json。如果你的ajax回调没有运行它的mime /响应输入问题或某种服务器故障。
确保$（'＃output'）返回一些内容。尝试打开Chrome控制台，并在使用其中一个debugger;语句暂停时输入。你应该找回一个HTML元素。
您的更新代码并未向我表明在ajax调用完成后发生了任何事情。这是故意/好吗？如果您希望之后发生某些事情，则应指定success参数。

Answer 11

Pajax是使用ajax响应在页面上更新内容的简单解决方案，它将避免许多重复步骤，只需检查以下链接

yui :: http://yuilibrary.com/yui/docs/pjax/
jQuery :: https://github.com/defunkt/jquery-pjax

还考虑使用模板进行html生成，它们是用json数据填充html的漂亮而简短的方法

javascript模板：http://handlebarsjs.com/
php side templating：https://github.com/bobthecow/mustache.php（如果你决定在php后端执行html生成）

Answer 12

很抱歉，如果我误解了你的问题，但这对我来说似乎相对容易。在#output中，有另一个包含状态的div ... 像这样：

<div id = "output">
    <div id="statuses">
    ...
    </div>
<textarea name='Status'> </textarea>
<input type='hidden' name='UserID' value="<?=$_SESSION['UserID']; ?>">
<input type='button' value='Status Update'>
</div>

然后，这里

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);

将$('#output').empty();更改为$('#statuses').empty(); 这样，你永远不会删除文本区域！：d

另外看看QArea的帖子，因为你的语法中有很多其他错误已经被覆盖了。：d 如果您需要更多帮助，如果我误解了这个问题，请在评论中知道：）

干杯

Pranay

onclick将textarea附加到div

12 个答案:

一些调试技巧：

要检查的地方：