外部js中的Ajax发布功能答案

【问题标题】：Ajax post in function in external js外部js中的Ajax发布功能
【发布时间】：2013-09-17 10:13:03
【问题描述】：

我用 ajax 帖子创建了一个函数。此函数位于我服务器上的外部 js 文件中。 (functions.js)。

从另一个页面我这样调用函数：

 $('table.table_sort td').click(function(e)
    {
        var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
        sortTable(url, e);
    });

functions.js 中的函数如下所示：

    function sortTable(url, e)
{
    if( !$(e.target).is(".last, .last input")){

        $('input[name="sort"]').parent('td').removeClass('sort_active');


        $('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');

        if($(this).children('input[type="radio"]:first').is(':checked'))
        {
            $(this).children('input[type="radio"]:last').prop('checked', true);
            $(this).children('div').removeClass().addClass('sort_asc');
            $('input[name="sort"]:checked').parent('td').addClass('sort_active');
        }
        else
        {
            $(this).children('input[type="radio"]:first').prop('checked', true);
            $(this).children('div').removeClass().addClass('sort_desc');
            $('input[name="sort"]:checked').parent('td').addClass('sort_active');
        }

        $.ajax({
            type: "POST",
            url: url,
            async: false,
            data: $('#myform').serialize(),
            complete: function(data)
            {
                $('#results').html(data.responseText);

            }
        });
    }
}

不幸的是，什么也没发生。当我这样做时，它会起作用：

$('table.table_sort td').click(function(e)
        {
            var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";

            if( !$(e.target).is(".last, .last input")){

                $('input[name="sort"]').parent('td').removeClass('sort_active');


                $('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');

                if($(this).children('input[type="radio"]:first').is(':checked'))
                {
                    $(this).children('input[type="radio"]:last').prop('checked', true);
                    $(this).children('div').removeClass().addClass('sort_asc');
                    $('input[name="sort"]:checked').parent('td').addClass('sort_active');
                }
                else
                {
                    $(this).children('input[type="radio"]:first').prop('checked', true);
                    $(this).children('div').removeClass().addClass('sort_desc');
                    $('input[name="sort"]:checked').parent('td').addClass('sort_active');
                }

                $.ajax({
                    type: "POST",
                    url: url,
                    async: false,
                    data: $('#myform').serialize(),
                    complete: function(data)
                    {
                        $('#results').html(data.responseText);

                    }
                });
            }
        });

有什么想法吗？

【问题讨论】：

你能告诉我们你的脚本包含在头部吗？
你是什么意思？也许仅供参考，函数中的警报（用于测试）会正常工作......
你是说如果你在函数中添加一个警告，它确实会显示它，还是你会尝试它？
是的，警报显示在函数中。
好的 - 谢谢。您是否在控制台中遇到任何错误？

标签： javascript jquery ajax post

【解决方案1】：

您的问题是在函数内部使用this。您需要将其传递给函数，因为函数内部的this 不会返回单击的元素...

$('table.table_sort td').click(function(e) {
    var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
    sortTable(this, url, e);
});

function sortTable(el, url, e)
{
    var $el = $(el);

    if( !$(e.target).is(".last, .last input")){

        $('input[name="sort"]').parent('td').removeClass('sort_active');
        $('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');

        if($el.children('input[type="radio"]:first').is(':checked'))
        {
            $el.children('input[type="radio"]:last').prop('checked', true);
            $el.children('div').removeClass().addClass('sort_asc');
            $('input[name="sort"]:checked').parent('td').addClass('sort_active');
        }
        else
        {
            $el.children('input[type="radio"]:first').prop('checked', true);
            $el.children('div').removeClass().addClass('sort_desc');
            $('input[name="sort"]:checked').parent('td').addClass('sort_active');
        }

        $.ajax({
            type: "POST",
            url: url,
            async: false,
            data: $('#myform').serialize(),
            complete: function(data)
            {
                $('#results').html(data.responseText);
            }
        });
    }
}

您现在应该可以将函数放回外部文件中，正如您最初想要的那样：)

【讨论】：