使用僅運行一次的jquery加載函數以及如何傳遞變量來重新加載div

Question

我對腳本的知識非常有限，所以我希望你們能幫助我解決一個小問題的簡單解決方案......

我正在使用以下jquery函數在單擊鏈接時使用新內容刷新div

<script> 
$(function() {       
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>

我的問題是，我需要將2個變量發送到reload.php頁面以在mysql查詢中使用（我不知道如何實現），我還需要讓多個鏈接與此函數一起工作，此刻我有多個具有相同ID的鏈接，只有第一個鏈接有效，所以我想我必須將不同的id與函數關聯才能使其工作，我該怎么做？

這是我正在使用的頁面： http ： //www.emulegion.info/teste/games/game.php

Answer 1

您可能希望在第一行使用文檔就緒而不是函數，因為這將確保在整頁（和所有元素）加載之前不執行代碼。

然后，您可以使用淡入淡出和加載的回調函數來及時執行操作。

您可以在.php之后添加其他變量，然后可以在reload.php文件中將這些變量讀取為$ var1 = $ _GET ['var1']; 為了安全起見，請確保對這些進行消毒。

<script type="text/javascript">

// execute when document is ready
$(document).ready(function() {

  // add click handler to your button
  $("#myButton").click(function() {

    // fade div out
    $("#loaddiv").fadeOut('slow',function(){

      // load new content
      $("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){

        // content has finished loading, fade div in.
        $("#loaddiv").fadeIn('slow');

      }); // end load content

    });  // end fade div out

  }); // end add click to button

}); // end document ready

</script>

對於不同的變量，您可以在按鈕中添加HTML5樣式變量。

<input type="button" id="myButton" data-var1="foo" data-var2="bar" />

單擊按鈕時可以檢索此項：

// add click handler to your button
  $("#myButton").click(function() {

  // get vars to use
  var var1 = $(this).data('var1');
  var var2 = $(this).data('var2');

  ... 

  load("reload.php?var1="+var1+"&var2="+var2

如果你有多個按鈕/鏈接我會使用類而不是id“myButton”。 這樣你可以使用上面的腳本將函數應用於所有按鈕。 只需將“#myButton”替換為“.myButton”

Answer 2

首先，您應該使用.on（'click'，function（）或.live（'click'，function（）來解決您的單擊問題。

你會想要做的事情：

<script> 
$(function() {       
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
   //data = url.php response
  if(data != '') {
   $("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
  }
});
});
});
</script>

然后你可以把var_dump($_POST); 在url.php中找出正在發送的數據。

Answer 3

嘗試創建一個可以接受所需參數的function 。 喜歡：

$(document).ready(function(){
    $('.link').click(function(){
        reload(p1,p2);
    });
});

function reload(param1, param2){
    $("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"&param2="+param2).fadeIn("slow");
}

但是通過執行上面的代碼，你的reload.php應該使用$GET 。 您還需要為鏈接使用class名而不是id 。

Answer 4

<script type="text/javascript">

// execute when document is ready
**$(document).ready(function() {**

  **$("#myButton").click(function() {**

    **$("#loaddiv").fadeOut('slow',function(){**

      **$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**

        // content has finished loading, fade div in.
        $("#loaddiv").fadeIn('slow');

      }); 

    });  
  }); 
}); 

</script>
  $("#myButton").click(function() {

  // get vars to use
  var var1 = $(this).data('var1');
  var var2 = $(this).data('var2');