【问题标题】:getting variables into ajax function JQuery将变量放入ajax函数JQuery
【发布时间】:2012-09-06 13:36:54
【问题描述】:

我有一个通过单击触发的 AJAX 函数,它基本上将一个表行复制到另一个表中。

我遇到的问题是我在 AJAX 请求之前从原始表行中获取了所需的变量,但是这些变量似乎没有传递给成功函数,它们以undefined 的形式出现。

有没有办法将变量传递给函数?

$('.addfile_popup').on('click', '.add2_fl', function(){
    var file_id1=$(this).data('file');
    var id=$('.useri').val();
    var file_name1=$(this).closest('tr').children('td:first').text();
    var upload_date1=$(this).closest('tr').children('td').eq(1).text();
    var upload_desc=$(this).closest('tr').children('td').eq(2).text();
    var job_idx=$(this).data('jid');
    //write to appointment database
    var data="job_id="+job_idx+"&file_id="+file_id1+"&user_id="+id;
    $.ajax({
        type:"POST",
        url:"admin_includes/prepend_files.php",
        data:data,
        success:function(html){
            var ups='';
            ups+='<tr data-file='+file_id1+'><td width="40%">'+file_name1+'</td><td>'+upload_date1+'</td><td>'+upload_desc+'</td><td><a href="sym.php?doc_id='+file_id1+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" class="del2_fl">DELETE</a></td></tr>';
            $(ups).prependTo('.app_table');
        }
    });
});

【问题讨论】:

    标签: javascript jquery variables scope


    【解决方案1】:
    $('.addfile_popup').on('click', '.add2_fl', function(){
        var file_id1=$(this).data('file');
        var id=$('.useri').val();
        var file_name1=$(this).closest('tr').children('td:first').text();
        var upload_date1=$(this).closest('tr').children('td').eq(1).text();
        var upload_desc=$(this).closest('tr').children('td').eq(2).text();
        var job_idx=$(this).data('jid');
        //write to appointment database
        var data="job_id="+job_idx+"&file_id="+file_id1+"&user_id="+id;
    
        // closure function that wrap your variables
        function success(file_id1, file_name1, upload_date1 ... ) {
             return function(html) {  
                var ups='';
                ups+='<tr data-file='+file_id1+'><td width="40%">'+file_name1+'</td><td>'+upload_date1+'</td><td>'+upload_desc+'</td><td><a href="sym.php?doc_id='+file_id1+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" class="del2_fl">DELETE</a></td></tr>';
                $(ups).prependTo('.app_table');
        }
    
        $.ajax({
            type:"POST",
            url:"admin_includes/prepend_files.php",
            data:data,
            success: success(file_id1, file_name1, upload_date1 ...)
        });
    });
    

    【讨论】:

    • +1 您缺少大括号,但我认为这是一个很好的解决方案。
    • 而是将字符串作为对象提供数据。
    【解决方案2】:

    您需要使用闭包。你可以在这里阅读它们:How do JavaScript closures work?

    这应该可行:

    $('.addfile_popup').on('click', '.add2_fl', function(){
      var me = this;
    
      (function() {
        var file_id1=$(me).data('file');
        var id=$('.useri').val();
        var file_name1=$(me).closest('tr').children('td:first').text();
        var upload_date1=$(me).closest('tr').children('td').eq(1).text();
        var upload_desc=$(me).closest('tr').children('td').eq(2).text();
        var job_idx=$(me).data('jid');
    
        //write to appointment database
        var data="job_id="+job_idx+"&file_id="+file_id1+"&user_id="+id;
    
    $.ajax({
        type:"POST",
        url:"admin_includes/prepend_files.php",
        data: {
          job_id: job_idx,
          file_id: file_id1,
          user_id: id
        },  
        success:function(html){
            var ups='';
            ups+='<tr data-file='+file_id1+'><td width="40%">'+file_name1+'</td><td>'+upload_date1+'</td><td>'+upload_desc+'</td><td><a href="sym.php?doc_id='+file_id1+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" class="del2_fl">DELETE</a></td></tr>';
    
        $(ups).prependTo('.app_table');
        }
        });//end ajax
    
        })();
    
    });
    

    还请注意,我更改了将数据传递给 AJAX 调用的方式。

    【讨论】:

    • +1 如果您不需要在其他任何地方访问变量,那么闭包是最好的方法。 JavaScript 闭包非常强大,绝对值得研究。
    • 它似乎不起作用。仍然没有找到初始变量。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-21
    • 1970-01-01
    • 2014-10-31
    相关资源
    最近更新 更多