將jQuery表單數據傳遞給js變量

我目前有這樣的代碼來阻止正常的表單提交，而是從API中檢索所需的輸出。然而，我然後試圖將這些數據設置爲一個變量，因此按鈕點擊可以在那裏重定向（輸出數據是一個URL）。我有下面的代碼，但它似乎不工作。有什麼想法嗎？將jQuery表單數據傳遞給js變量

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; 
    });

來源

2012-05-30 Henry Cole

你需要移動成功事件處理函數中調用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請求，這將綁定多個事件處理程序到您的按鈕。爲了解決這個問題，你可以在綁定新事件之前解除綁定事件處理程序。

來源

2012-05-30 10:24:59

+1如果運行多個請求，他可能需要先「解除綁定（）」。 –

@ James-allardice完美的工作，謝謝！最後一件事情..我如何追加一些文本到變量的末尾..我嘗試變種「2」，但無濟於事。 –

沒問題，很高興我能幫忙:)你可以使用'+'運算符連接字符串：'var tourl = data + 2;' –

您正在封閉範圍內定義一個新變量。更改

var tourl = data;

到

tourl = data;

然後它會被分配到全局變量。

來源

2012-05-30 10:24:09

將jQuery表單數據傳遞給js變量

回答

相關問題