Question

我有一个简单的网页，其中包含以下HTML：

    <!doctype html>
    <html>
        <head>
            <title>Homework 8 - Home</title>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
            <script src="script.js"></script>
        </head>
        <body>
        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="help.html">Help</a></li>
            </ul>
        </nav>
        <div id="content">
            <div id="page">
                Suspendisse vel ante ornare, vulputate lacus et, condimentum lorem.
            </div>
            <aside>
                <h3>Helpful Links</h3>
                <ul>
                    <li><a href="http://google.com/">Google</a></li>
                    <li><a href="http://facebook.com/">Facebook</a></li>
                </ul>
            </aside>
        </div>
        </body>
    </html>

以及以下php文件中的数据数组：

    <?php


    function random_lipsum($amount = 1, $what = 'paras', $start = 0) {
        return simplexml_load_file("http://www.lipsum.com/feed/xml?amount=$amount&what=$what&start=$start")->lipsum;
    }



    $data = [
        'home' => ['title' => 'Home page', 
                   'content' =>     random_lipsum(3),
                   'links' => [
                        'http://google.com/' => 'Google',
                        'http://facebook.com/' => 'Facebook',
                    ]
        ],
        'about' => ['title' => 'About page', 
                   'content' =>     random_lipsum(3),
                   'links' => [
                        'http://abv.bg/' => 'ABV.BG',
                        'http://dir.bg/' => 'DIR.BG',
                    ]
        ],
        'help' => ['title' => 'Help page', 
                   'content' =>     random_lipsum(3),
                   'links' => [
                        'http://wikipedia.com/' => 'Wikipedia',
                        'http://stackoverflow.com/' => 'StackOverflow',
                    ]
        ],
    ];

    $page = (isset($_GET['page']) && isset($data[$_GET['page']]))?$_GET['page']:'home';

    echo json_encode($data[$page]);
    ?>

我的任务是通过点击更改<div id="content">页面的<title>以及<aside>中jQuery和AJAX的链接的内容<nav>中的链接，无需重新加载页面。例如，当您单击“关于”链接时，页面的内容，标题和旁边链接应更改为data文件中带有键php的{{1}}数组中的链接。我试着编写一些代码，但没有任何反应。这是它（它存储在about文件的script.js中引用的名为<head>的文件中：

HTML

你能帮助我，告诉我我做错了什么吗？

Answer 1

您的PHP返回JSON，而不是HTML。使用：

dataType: "json"

您返回的唯一HTML是title和content属性的值。此外，links元素中的PHP关联数组将成为Javascript对象，而不是数组。我建议你把它改成索引数组：

'links' => [
    [ 'url' => 'http://abv.bg/', 'name' => 'ABV.BG'],
    [ 'url' => 'http://dir.bg/', 'name' => 'DIR.BG']
]

然后success函数将是：

success: function(data) {
    $('#page').html(data.about.content);
    $('title').html(data.about.title);
    $.each(data.about.links(function(i, link) {
        $('aside ul li').eq(i).children('a').attr('href', link.url).html(link.name);
    });
}

正如GolezTrol的回答所指出的那样，.on()的处理程序参数必须是一个函数：

$('nav ul li:nth-child(2) a').on('click', function(e) {
    e.preventDefault();
    $.ajax(...);
});

由于您是从localhost加载页面，因此需要更改jQuery URL以转到Web：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

当您省略URL的协议前缀时，它使用与包含它的页面相同的协议，以及使用file:的本地文件。但您需要使用http:或https:从网络上获取内容。

Answer 2

您需要在函数内部单击需要执行的代码，否则在加载页面时立即执行Ajax请求，并将该调用的结果（即jqXHR对象）传递给{ {1}}而不是属性回调。

.on()

  $(document).ready(function(){   //executed after the page has loaded
        $('nav ul li:nth-child(2) a').on('click',
          function() {
            $.ajax({    //create an ajax request data.php
                type: "POST",
                url: "data.php",
                data: 'page=about',
                dataType: "html",   //expect html to be returned
                success: function(data){
                    $('#page').html(data.about.content);
                    $('title').html(data.about.title);
                    $('aside ul li:first-child a').html(data.about.links[0]);
                    $('aside ul li:nth-child(2) a').html(data.about.links[1]);
                }
            })
          }
        );
    });

单击jQuery和AJAX更改页面内容

2 个答案: