4 外部加载form.html在一个div上点击带有ajax的radio答案

【问题标题】：4 external load form.html in a div on click on the radio with ajax4 外部加载form.html在一个div上点击带有ajax的radio
【发布时间】：2014-02-28 06:50:38
【问题描述】：

我想使用 AJAX 加载页面 4 到 4 单选按钮。例子： Radio A 加载 pageA.html 收音机 B 加载 pageB.html Radio C 加载 pageC.html Radio D 加载 pageD.html 如果用户刷新页面，我希望保留您所做的最后选择。我是 AJAX 新手。第一个Radio“A”办公室完美的pageA.html。从这里开始，如果您被选中，我不知道如何加载其他页面。

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

});

【问题讨论】：

HTML 页面中不能有重复的 id，否则会得到不可靠的结果。
你是对的，复制粘贴不改变id。

标签： jquery ajax html load

【解决方案1】：

如果您将 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');
});

此外，您可以给每个按钮一个类，然后在您的选择器中使用它。无论哪种方式，您都不必重复代码。

【讨论】：

+1.. 这可能是比我更好的答案，尽管我会使用 CSS 类而不是页面上的任何单选按钮。如果页面稍后更改（更多具有不同功能的单选按钮），您可能会破坏内容。
我也会使用类，因为你已经预料到了变化。
感谢您完成工作的几行。如果用户刷新页面？如何保留选定的收音机？谢谢杰伊布兰查德

【解决方案2】：

您的单选按钮不应具有相同的 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");
    });
});

【讨论】：

netbeans 给我一个语法错误，也许我们希望大括号关闭函数。