【问题标题】:Jquery injecting html doesn't work. the ajax call is unstableJquery 注入 html 不起作用。 ajax 调用不稳定
【发布时间】:2012-02-21 12:52:47
【问题描述】:

我是 jquery 和 ajax 的新手。我有2个问题。我有以下 html 层次结构;

<div id="tasks">

    <!-- I want to inject another div  task_element and change the values inside -->

    <div id="task_element">

        <section class="actionframe"> ...
        <nav class="commentsDetail">  ...       

    </div>

    <div id="task_element">
        ....
    </div>

</div>

html 中的注释注入是通过单击 html 按钮来处理的。我有以下 jquery 来处理事件;

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

    if(!$('#add_task_name').val())
    {
        $('.dropinput nav').slideUp(300);
        return false;
    }
    else
    {           
        // call ajax
        var $task_name = $('#add_task_name').val();
        var $task_date_time = $('#add_task_date').val();        
        var $task_location = $('#add_task_location').val();
        var $add_task = 'add_task';
        var sent_data = { 
               "op": $add_task ,
               "task_name" : $task_name,
               "task_date_time" : $task_date_time,
               "task_location" : $task_location
        };      

        var $out = JSON.stringify(sent_data);

        $.ajax({

              type: 'POST',
              url: 'ajax_service.php',                    
              contentType: "application/json; charset=utf-8",
              dataType: 'json',
              data: $out,        
              success: function() {
                  //$('.dropinput nav').slideUp(300);
                  // append jquery div
                  //window.location.reload();
                  $('#add_task_name').val('');
                  $('#add_task_date').val('');
                  $('#add_task_location').val('');
                  $('.dropinput nav').slideUp(300);                                                                   
                  $('#tasks').closest('#task_element').prependTo('#tasks');
              },
              error: function(xhr, ajaxOptions ,thrownError) {          
                  console.log(xhr);
                  console.log(thrownError);
              }

         });                    
    }

});

第一个问题显然是我无法在html中实现注入。第二个问题是当我在成功函数中更改代码时,ajax_service 变得不稳定,无法正常工作。不稳定是指在第一次单击按钮时,它可以正常工作,但在下一次单击时它根本不起作用(反之亦然)并引发内部服务器错误。

有解决问题的想法吗?

成功函数改ui有错吗?

P.S : 我几乎可以肯定 ajax_service.php 可以正常工作

编辑:根据评论,我将添加 ajax_service.php ;

...some session variables and includes other php files here ...

$data = file_get_contents('php://input');
$data = json_decode($data, true);

if($data['op'] == 'add_task')
{
        $task_name = $data['task_name'];
        $task_location = $data['task_location'];        
        $task_date_time = $data['task_date_time'];
        $task_date_time = trim($task_date_time);

        if($task_date_time != "")
        {           
            $date_time = explode(" ", $task_date_time);             
            $task_date = "'".$date_time[0]."'";         
            $task_time = "'".$date_time[1]."'"; 

            if(trim($task_date) == "''")
            {
                $task_date = 'NULL';
            }
            if(trim($task_time) == "''")
            {
                $task_time = 'NULL';
            }       
            if( ($task_date == 'NULL'))
            {               
                $task_time = "'".$date_time[0]."'";
            }
        }
        else
        {           
            $task_date = 'NULL';
            $task_time = 'NULL';            
        }

        // 0 : history, 1 : today, 2 : later
        // compare browser time and task_date and define $time3 variable
        $task_time3 = 1;

        if(isset($task_name))
        {
            if($task_location == "")
            {
                $task_location = NULL;
            }

            $result_add_task = add_task($profile_id, $task_name, $task_location, $task_date, $task_time3, $task_time);
            if($result_add_task['result'])
            {
                $return['error'] = false;
                $return['msg'] = $result_add_task['description'];
                $return['op'] = 'add_task';
            }
            else 
            {
                $return['error'] = true;
                $return['msg'] = $result_add_task['description'];
                $return['op'] = 'add_task';         
            }

        }
        else 
        {
            $return['error'] = true;
            $return['msg'] = 'task_name is empty';
            $return['op'] = 'add_task';
        }

        echo json_encode($return);  
}

【问题讨论】:

  • 现在,它可以在 firefox 和 chrome 中正常工作。它在野生动物园中不起作用。它让我非常疯狂
  • 好吧,我刚刚注意到,当我直接访问 ajax_service.php 时,有时它会说错误请求(如我所料),有时它会给出服务器错误

标签: php jquery ajax


【解决方案1】:

内部服务器错误提示 ajax_service.php 无法正常工作。改变success函数中的ui,原则上是可以的。但是,从您的代码中,我无法轻易发现您想要做什么。根据我从您的 cmets 中了解到的情况,您正在尝试将以下形式的任务添加到 #tasks

<div id="task_element">
    <section class="actionframe"> ...
    <nav class="commentsDetail">  ...       
</div>

如果是这种情况,您可能想要创建一个新的 div 并像这样附加它

var div = '<div id="task_element"><section class="actionframe">' + whatever_data_has_been_returned_from_server + '<nav class="commentsDetail"></div>'
$('#tasks').prepend($(div))

而不是这部分代码

$('#add_task_name').val('');
$('#add_task_date').val('');
$('#add_task_location').val('');
$('.dropinput nav').slideUp(300);
$('#tasks').closest('#task_element').prependTo('#tasks');

【讨论】:

  • 所以,我需要在 jquery 中创建 html。好的,让我测试一下
  • 第一个问题解决了。我需要一个 ajax 调用不稳定的解决方案。
  • 请给我们更多代码。 msgmash.com 也渴望找到该错误 ^^
  • 我添加了 ajax_service.php 。现在的问题很大:D
【解决方案2】:

我认为部分问题可能在于这段代码

function() {
              //$('.dropinput nav').slideUp(300);
              // append jquery div
              //window.location.reload();
              $('#add_task_name').val('');
              $('#add_task_date').val('');
              $('#add_task_location').val('');
              $('.dropinput nav').slideUp(300);                                                                   
              $('#tasks').closest('#task_element').prependTo('#tasks');

我觉得应该是这样

function(data) {
              //$('.dropinput nav').slideUp(300);
              // append jquery div
              //window.location.reload();
              $('#add_task_name').val('');
              $('#add_task_date').val('');
              $('#add_task_location').val('');
              $('.dropinput nav').slideUp(300);                                                                   
              $('#tasks').prepend(data);

因为您想将从 php 应用程序返回的数据插入到 #tasks div 下的 div 列表中。该函数的 data 参数保存您从服务器端应用程序(在本例中为 ajax_service.php)返回的响应数据。

【讨论】:

  • 附言。如果 ajax_service.php 有问题,我们需要查看一些代码。
  • 我添加了 ajax_service.php。它有时会产生错误,有时会产生不同的输入。
【解决方案3】:

我已经弄清楚了 ajax 调用的不稳定性。我把return false放在我的ajax调用之后并通过cache : false禁用缓存

【讨论】:

    猜你喜欢
    • 2012-04-20
    • 2013-10-08
    • 1970-01-01
    • 1970-01-01
    • 2015-09-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-14
    相关资源
    最近更新 更多