Question

我一直在尝试创建一个没有jQuery或任何其他库的纯函数来在ajax请求中转换我的web应用程序上的所有链接。但正如你应该知道的那样没有成功。

有人能告诉我哪里出错了吗？

function ajaxify() {
var content = document.getElementsByTagName('body');
var links = document.body.querySelectorAll('a');
[].forEach.call(links, function (link) {
    console.log(link);
    link.addEventListener('click', function (event) {
        var url = link.href;
        // Manipulate history
        window.history.pushState({}, '', url);
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.onload = function () {
            if (request.status == 200) {
                content[0].innerHTML = request.responseText;
            } else {
                alert('Request failed. Returned status of' + request.status);
            }
        };
        request.send();
        event.preventDefault();
    });
});

}

修改

以上脚本之一的页面不起作用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.png" type="image/png">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/authentication.css" type="text/css">
    <title>Web APP</title>
</head>
<body>
    <div class="wrapper">
        <div class="conteiner">
            <a href="index.html"><i class="material-icons custom-arrow-back">arrow_back</i></a>
            <img class="logomarca" src="img/logo.png">
            <form name="form" id="form" action="ForgotPassword" method="POST">
                <div class="align-form">
                    <div class="input-conteiner">
                        <input class="btn-material-style" type="email" id="email" name="email"  maxlength="37" value="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" autocomplete="off" required>
                        <label>Email</label>
                        <span class="bar"></span>
                    </div>
                    <p class="input-subscribe feedback"></p>
                    <div class="input-subscribe" style="margin-top: 2.4em">
                        <input class="btn-material-style" id="btn-submit-email" type="submit" name="submit" value="Request new password" style="border: 0">
                    </div>
                </div>
            </form>
        </div>       
    </div>
    <footer class="footer">
        <p><span id="copyleft">©</span> 2016 - <span class="custom-color">Web APP</span></p>
    </footer>
    <script src="js/authentication.js"></script>
        ajaxify();
    </script>
</body>

解决

唯一的问题是XMLHttpRequest出于安全原因不允许将脚本作为DOM文本发送。所以我放弃了，现在我正在使用jQuery来做到这一点。：（

Answer 1

querySelectorAll('a')将返回一组锚点。你需要迭代它，然后addEventListener迭代到每一个。

Answer 2

querySelectorAll返回一个NodeList，为了在NodeList中添加一个监听每个HTMLElement的事件，你需要将NodeList转换为一个数组并循环遍历它：

 var links= content[0].querySelectorAll('a');

 [].forEach.call(links, function(link) {
   link.addEventListener('click', function(event) { //code });
 });

另外，你试过这个：

 document.body.querySelectorAll('a');

使用ajax请求攻击所有链接

2 个答案: