php - Ajax 的自定义函数未按预期工作

Question

我一整天都在为这个问题苦恼。我缺乏对 JavaScript 的了解，对于 DOM 操作我开始使用 jQuery。构建一些基本的东西很容易。我想要的是构建自定义函数，该函数将使用列表填充表单，该列表将根据我传递给该函数的输入参数从数据库中拉出。

代码如下所示:

(function($) {
        $.fn.multiSelect = function(a,b,c) {
        var someVar1 = parseInt(a,10);
        var someVar2 = parseInt(b,10);
        var someVar3 = c;
        var dataString = "a=" + someVar1 + "&b=" + someVar2 + "&c=" + someVar3;
        $.ajax({
            type:       "POST",
            url:        "test_ajax.php",
            data:       dataString,
            dataType:   'json',
            success:    function(data) {
                var a1 = data['a'];
                var b1 = data['b'];
                var c1 = data['c'];
                return $(this).html('<p>' + a1 + b1 + c1 + '</p>');
            }
        });
        return $(this).html('<p>' + someVar1 + someVar2 + someVar3 + '</p>');
    }
    };
}) (jQuery);

test_ajax.php 中的 PHP 代码是:

<?php
if(isset($_POST['a']) AND !empty($_POST['a'])) {
    $_something = array(
                    'a'=> $_POST['a'],
                    'b'=> $_POST['b'],
                    'c'=> $_POST['b']
                    );
    echo json_encode($_something);
}
?>

现在，当我像这样使用 jQuery 函数时:

$('#someDiv').multiSelect(1,1,'user');

$.(ajax) 中的函数不返回任何内容，而在其外部(我创建它只是为了查看传递给函数的内容)返回“11user”。

如果我使用上面的代码，如下所示:

$(function() {
    var dataString = 'a=' + 1 + '&b=' + 1 + '&c=user';
    $.ajax({
            type:       "POST",
            url:        "test_ajax.php",
            data:       dataString,
            dataType:   'json',
            success:    function(data) {
                var a1 = data['a'];
                var b1 = data['b'];
                var c1 = data['c'];
                $('#someDiv').html('<p>' + a1 + b1 + c1 + '</p>');
            }
        });
});

它从 test_ajax.php 脚本获取数据。所有这些都很简单，只是为了解决问题，然后我将构建复杂的 PHP 脚本来完成数据库的工作。

我猜测我在变量(本地/全局)或不正确的 jQuery 函数链接上做错了什么。

编辑:由于我会在不同的菜单上多次重复此操作，因此函数会产生更多逻辑，然后一遍又一遍地重复整个代码。

如有任何帮助，我们将不胜感激。

Answer 1

我认为您的意思是您的 $.ajax 调用中的这一行不起作用:

return $(this).html('<p>' + a1 + b1 + c1 + '</p>');

这是因为 success 调用中的 this 并不指向 DOM 对象。它指向一个包含 AJAX 调用设置的对象。

您需要在 AJAX 调用中使用 context 属性来使 this 表示您想要的含义:

    $.ajax({
        type:       "POST",
        url:        "test_ajax.php",
        data:       dataString,
        dataType:   'json',
        context:    this,
        success:    function(data) {
            var a1 = data['a'];
            var b1 = data['b'];
            var c1 = data['c'];
            return $(this).html('<p>' + a1 + b1 + c1 + '</p>');
        }
    });