Question

我目前使用此代码来阻止正常的表单提交，而是从API检索所需的输出。但是，我正在尝试将此数据设置为变量，以便按钮单击可以在那里重定向（输出数据是URL）。我有以下代码，但它似乎不起作用。有什么想法吗？

var tourl;
$("form#surlform").submit(function(){
        var url = $("input#url").val(); 
        $.get("api/create.php?url=" + url, function(data) {
                $("input#url").val(data);
                $("input#url").select();
                $('#button').hide();
                $('#hbutton').show();
                var tourl = data;
            });

        return false;
    });
    });
$('#hbutton').bind('click', function() {
        window.location = tourl;
    });

Answer 1

您需要在成功事件处理程序中移动bind调用：

$.get("api/create.php?url=" + url, function(data) {
    $("input#url").val(data);
    $("input#url").select();
    $('#button').hide();
    $('#hbutton').show();
    var tourl = data;
    $('#hbutton').bind('click', function() {
        window.location = tourl;
    });
});

首先，tourl的范围限定为成功事件处理程序。它不能在该功能之外使用。

其次，由于您发出了AJAX请求，tourl将为undefined，直到该请求返回响应。确保tourl被赋值的唯一方法是等待回调做任何依赖它的事情。

如评论中所述，如果多次执行AJAX请求，这将将多个事件处理程序绑定到您的按钮。为了解决这个问题，您可以在绑定新事件之前取消绑定事件处理程序。

Answer 2

您正在封闭范围内定义新变量。改变

var tourl = data;

到

tourl = data;

然后将其分配给全局变量。

将jQuery表单数据传递给js变量

2 个答案: