XMLHttpRequest异步请求后造成页面重新加载的问题

lisweden 2011-12-02 10:33:59

如题，用firebug调式，发现XMLHttpRequest请求能正常反回，但反回后页面就重新加载了，造成异步请求的内容丢失，又回到页面初始状态。代码如下：
前台HTML调用：



<li><a id="basicInfo" href="" onclick="navjax(this)">基本资料</a></li>

JS：



    function navjax(obj) {

        var url = "ajaxTest.aspx?xn=" + obj.id;

        xh = new XMLHttpRequest();

//        xh.onreadystatechange = function () {

//            if (xh.readyState == 4 && xh.status == 200) {

//                document.getElementById("text").innerHTML = xh.responseText;

//                document.getElementById("slip").innerHTML = xh.responseText;

//            }

        //        }

        xh.open("POST", url,false);

        xh.send();

        document.getElementById("text").innerHTML = xh.responseText;

        document.getElementById("slip").innerHTML = xh.responseText;

    }

熟悉XMLHttpRequest的，帮忙解决下，谢谢啦！

...全文

860 28 打赏收藏转发到动态举报

写回复

用AI写文章

28 条回复

切换为时间正序

请发表友善的回复…

发表回复

lisweden 2011-12-02

打赏
举报

两位讨论起来了！
<a>标签其实是一个锚，当加了个href后，就成了超链接，href="#"表示的是一个空链接。
href=""这样写时，会引发导航，而URL没空，则会刷新本页，所以要加return false
href="#"这样写，则不需加return false，因为这是一个空链接，不会引发导航。

这些细节的东西之前都没怎么注意。

fjasdlkgh 2011-12-02

打赏
举报

[Quote=引用 21 楼 sandy945 的回复:]
算了，不解释了。

先学好HTML吧~ 然后再学学 javascript
[/Quote]

大牛我应该理解你的意思，利用herf="#"是指连接到本页，比如：http://zhidao.baidu.com/question/90174626.html网页
有一个<a href="#">我是超链接</a>的话，点击他，就会在地址栏里显示http://zhidao.baidu.com/question/90174626.html#
，他只是在地址栏里加个井号而已，不会刷新页面真的，不信你随便找个程序试试啊！
大牛太伤我的心了！。。。实践雄于万变。

fjasdlkgh 2011-12-02

打赏
举报

大牛我感保证，我真的是在我自己用XMLHttpRequest写的实例上测试，利用断点调试看得出的结论。
要不大牛你找个demo测试看看真的不是return false的原因的！大牛为什么质疑我！

我都专门写程序研究过XMLHttpRequest，这点问题我还是懂的。

阿非 2011-12-02

打赏
举报

算了，不解释了。

先学好HTML吧~ 然后再学学 javascript

fjasdlkgh 2011-12-02

打赏
举报

楼主，你先改成<a id="basicInfo" href="#" onclick="navjax(this)">试试。
在就是后台页面处理异步请求的方法最好加上Response.End();
如果还刷新，肯定要找其它的问题，要一步步的排除。

fjasdlkgh 2011-12-02

打赏
举报

[Quote=引用 18 楼 sandy945 的回复:]
引用 15 楼 fjasdlkgh 的回复:
我加断点观察了，加不加return false不影响刷不刷新页面。只有onclick里的方法异步请求刷新了一次请求页面。

肯定是别的地方导致的。真的。大牛，要不你动手找个例子测试看看就明白了。

你要弄明白执行顺序，才能明白为什么要 + return false
[/Quote]

我明白，你的意思是先执行navjax异步方法，然后利用return false终止href的跳转。
但是导致刷新的问题不是href上。假如就算是，当然不可能！加个#肯定不会导致href刷新页面的。

阿非 2011-12-02

打赏
举报

[Quote=引用 15 楼 fjasdlkgh 的回复:]
我加断点观察了，加不加return false不影响刷不刷新页面。只有onclick里的方法异步请求刷新了一次请求页面。

肯定是别的地方导致的。真的。大牛，要不你动手找个例子测试看看就明白了。
[/Quote]
你要弄明白执行顺序，才能明白为什么要 + return false

fjasdlkgh 2011-12-02

打赏
举报

[Quote=引用 8 楼 lisweden 的回复:]
发现加个href="#"后，去掉return false也是可以的，但这样href="javascript:navjax(this)",却不行
[/Quote]
请问楼主，你干嘛又把方法加到href里面！0 0，不是有onclick事件执行方法吗！0 0

阿非 2011-12-02

打赏
举报

href=javascript:navjax(this)

this 只向的是 window

所以不要这样写

fjasdlkgh 2011-12-02

打赏
举报

我加断点观察了，加不加return false不影响刷不刷新页面。只有onclick里的方法异步请求刷新了一次请求页面。

肯定是别的地方导致的。真的。大牛，要不你动手找个例子测试看看就明白了。

lisweden 2011-12-02

打赏
举报

使用href="javascript:navjax(this)，调试发现，this不是指向a标签

fjasdlkgh 2011-12-02

打赏
举报

[Quote=引用 10 楼 sandy945 的回复:]
引用 5 楼 fjasdlkgh 的回复:
引用 3 楼 sandy945 的回复:
onclick="navjax(this);return false"

大牛，应该不是这个的问题，href没有定向地址，不会刷新页面，除非他后退返回页面导致刷新。

楼主最好改下：<a id="basicInfo" href="#" onclick="">基本资料</a>，加个#号，不然他会跳转到连……
[/Quote]
我确定，我上面说了，如果用<a id="basicInfo" href="" onclick="">，会跳转到一个列表页面，那样需要后退返回之前的页面肯定会刷新。
用<a id="basicInfo" href="#" onclick="">，肯定没问题，而且可以执行onclick事件，我用我本地的XMLHttpRequest实例测试过才敢这么说的。

haa17 2011-12-02

打赏
举报

没这样写的啊。
href="#" 或者增加 return false 都可以的。
[Quote=引用 8 楼 lisweden 的回复:]

发现加个href="#"后，去掉return false也是可以的，但这样href="javascript:navjax(this)",却不行
[/Quote]

hhh305743261 2011-12-02

打赏
举报

href='javascript:;'

阿非 2011-12-02

打赏
举报

[Quote=引用 5 楼 fjasdlkgh 的回复:]
引用 3 楼 sandy945 的回复:
onclick="navjax(this);return false"

大牛，应该不是这个的问题，href没有定向地址，不会刷新页面，除非他后退返回页面导致刷新。

楼主最好改下：<a id="basicInfo" href="#" onclick="">基本资料</a>，加个#号，不然他会跳转到连接地址列表页面。
[/Quote]
href没有定向地址，不会刷新页面

你确定？

阿非 2011-12-02