使用Ajax在HTML页面中重定向功能

Question

我今天访问了此网站页面 。 页面3单选链接按钮顶部。 当我单击惊讶的按钮时，没有Amy窗口加载功能，我希望即时单击单选按钮，将Instant移至第二页。

我还查看了Ajax代码的源代码，但可能没有。

当用户单击任何链接或按钮或输入内容时，我也想在我的网站上创建相同的页面，页面永远不会通过链接页面功能完成所有加载。

请帮助我如何创建类似的代码。 请举一个例子。

预先感谢。

Answer 1

这项技术称为“ 通过AJAX加载页面内容 ”。 您可以在Google上搜索此关键字以了解其工作原理。

这是jQuery javascript库的工作演示。 您可以检查我的代码并在脚本标记中进行注释。 （单击“ index.html”文件中的编辑器中的启动）

链接： https : //plnkr.co/IMHyUwI4zllOwlCXb6b5

代码：

/* When the DOM ready */
    $(document).ready(function() {
      /* Do */
      /* Load content to div has id = main, from url = 'r1.html' (default state for fisrt visit time)*/
      $('#main').load('r1.html');
      /* Find input with id = r1, bind to click event */
      $('#r1').on('click', function() {
        /* when it get clicked , load content to div has id = main, from url = 'r1.html' */
        $('#main').load('r1.html');
      });
      /* Find input with id = r2, bind to click event */
      $('#r2').on('click', function() {
        /* when it get clicked , load content to div has id = main, from url = 'r2.html' */
        $('#main').load('r2.html');
      });
      /* Find input with id = r3, bind to click event */
      $('#r3').on('click', function() {
        /* when it get clicked , load content to div has id = main, from url = 'r2.html' */
        $('#main').load('r3.html');
      });
    });