4外部載入form.html在div上點擊收音機上的ajax

我想用AJAX加載第4頁到第4頁單選按鈕。例如：無線電負荷將pageA.html 無線電b負載pageB.html 無線電C加載pageC.html 收音機d負荷pageD.html 如果用戶刷新頁面，我想保持你的最後一次選擇。我是AJAX新手。第一臺Radio「A」辦公室完美pageA.html。從這裏開始，如果您選擇了其他頁面，我不知道如何加載其他頁面。4外部載入form.html在div上點擊收音機上的ajax

How can I improve my script? 

Thanks in advance

HTML代碼

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 


     Radio A <input id="button" type="radio" name="button" value=""/> 
     Radio B <input id="button" type="radio" name="button" value=""/> 
     Radio C <input id="button" type="radio" name="button" value=""/> 
     Radio D <input id="button" type="radio" name="button" value=""/> 

     <div id="content"></div> 
     <script type="text/javascript" src="js/libs/jquery/jquery.js"></script> 
     <script type="text/javascript" src="js/ajax.js"></script> 
    </body> 
</html>

我的AJAX代碼

$('#button').click(function() { 
    $.ajax({ 
     url: 'pageA.html', 
     success: function(data) { 
      $('#content').html(data); 
     } 
    }); 

});

來源

2014-02-27 user3311699

你不能在HTML頁面中有重複的id，否則你會得到不可靠的結果。 –

你是對的，複製並粘貼不改變id。 – user3311699

如果您更改ID，頁面名稱，那麼你可以縮短你這樣的代碼 -

HTML

Radio A <input id="pageA" type="radio" name="button" value=""/> 
Radio B <input id="pageB" type="radio" name="button" value=""/> 
Radio C <input id="pageC" type="radio" name="button" value=""/> 
Radio D <input id="pageD" type="radio" name="button" value=""/>

jQuery

$('input[type="radio"]').click(function() { 
    var pageName = this.id; 
    $('#content').load(pageName + '.html'); 
});

另外，你可以給每個按鈕一個類，然後在你的選擇器中使用它。無論哪種方式讓你不必重複代碼。

來源

2014-02-27 21:27:28

+1 ..這可能是比我更好的答案，雖然我會使用CSS類而不是頁面上的任何單選按鈕。如果頁面稍後改變（具有不同功能的更多單選按鈕），您可能會冒風險。 – BT643

我也會使用類，因爲你所預期的變化。 –

謝謝你幾行，他們的工作。如果用戶刷新頁面？我怎樣才能保持選定的收音機？謝謝Jay Blanchard – user3311699

你的單選按鈕不應該有相同的ID ..他們應該是唯一的。我使用jQuery load()方法，像這樣，因爲它只是似乎總是有很多清潔/整潔對我說：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 

     Radio A <input id="button1" type="radio" name="button" value=""/> 
     Radio B <input id="button2" type="radio" name="button" value=""/> 
     Radio C <input id="button3" type="radio" name="button" value=""/> 
     Radio D <input id="button4" type="radio" name="button" value=""/> 

     <div id="content"></div> 
     <script type="text/javascript" src="js/libs/jquery/jquery.js"></script> 
     <script type="text/javascript" src="js/ajax.js"></script> 

    </body> 
</html>

然後使用jQuery load()

$(document).ready(function() { 
    $('#button1').click(function() { 
     $("#content").load("pageA.html"); 
    }); 

    $('#button2').click(function() { 
     $("#content").load("pageB.html"); 
    }); 

    $('#button3').click(function() { 
     $("#content").load("pageC.html"); 
    }); 

    $('#button4').click(function() { 
     $("#content").load("pageD.html"); 
    }); 
});

來源

2014-02-27 21:13:24 BT643

netbeans給我一個語法錯誤，也許我們想要大括號來關閉這個函數。 – user3311699

更新..對不起:) – BT643

4外部載入form.html在div上點擊收音機上的ajax

回答

相關問題