Question

这是我的ajax和html代码。当我点击链接上的收件人国家/地区时，它无法加载recipient_country.html，我在下面调用了GET方法。

<div id = "topbar">
    <ul>
        <li>
            <a href="#recipient_country.html" onclick = "recipient_country()">Recipient Country</a>
        </li>
    </ul>
</div>
<div id = "content"></div>

function recipient_country(e) {

    (e || window.event).preventDefault();

    var con = document.getElementById('content'), xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function (e) { 

        if (xhr.readyState == 4 && xhr.status == 200) {
            con.innerHTML = xhr.responseText;
        }
    }

    xhr.open("GET", "recipient_country.html", true);
    xhr.setRequestHeader('Content-type', 'text/html');
    xhr.send();
}

Answer 1

您忘记将参数event传递给调用方法。由于参数不匹配，永远不会调用recipient_country(e)方法。在点击时将event传递给该功能。

 <li><a href="#recipient_country.html" onclick = "recipient_country(event)">Recipient Country</a></li>

Answer 2

由于您还标记了jQuery，我是否可以建议使用其$.ajax()方法

function recipient_country()
{
    $.ajax({
      type:'get',
      url:'recipient_country.html',
      success:function(response)
      {
          $('#content').html(response);
      }
   });
   return false;
}

如果您打算使用jQuery版本＆gt; 1.8，您需要稍微更改您的代码

function recipient_country()
 {   
    $.ajax({
       url: "test.html",
       type:"get",   
    }).done(function(response) {
          $('#content').html(response);
    });
    return false;
 }

点击ajax中的链接不起作用

2 个答案: