JQuery笔记之AJax
浏览 327 | 评论 0
黄文勇
2018年12月07日

今天初步接触JQuery的Ajax技术,虽然之前有使用过Ajax 的load()方法但是呢,都只是自己胡乱搞的,并没有很系统的学习,所以今天听老师再讲的时候还是一脸懵逼,比如之前使用的load()方法,异步加载其他文件的时候我就这样使用的$(".display").load("php/xxx.php",{firstname:$("#firstname").val()});这是比较常用的方式,这种方式的提交是post方式,没带参是get方式。

今天学的是:

  • load("",function(){})方法:
  • 回调函数
  • 无论请求成功或失败,在请求结束后调用
  • 语法:function(respText, textStatus, XMLHttpR)
  • respText:responseText请求返回的内容
  • textStatus:请求状态success | error | notmodified | timout
  • XMLHttpR:XMLHttpRequest对象

今天的作业是:

  • 当textStatus为success时,在对话框中输出XMLHttpRequest的类型,否则输出“加载失败!”
  • 遍历responseText中的h6标记,在控制台输出其html

核心代码如:

$("#send").click(function(){
    $("#resText").load("test.html .para",function(respText,textStatus,XMLHttpR){
        if(textStatus=="success"){
            alert(XMLHttpR);
        }else{
            alert("加载失败");
        }

        //遍历加载的HTML文件里面的<h6>

        $('h6',respText).each(function(tmp){
            console.log($(this).html());
        });

        // $(respText).find("h6").each(function(){
        // alert($(this).html());
        // });
    });
}

着重讲一下这个//遍历加载的HTML文件里面的h6标签
老师的写法是这个:

$(respText).find("h6").each(function(){
    alert($(this).html());
});

个人觉得这个写法很麻烦,所以自己就在想这个优化这个写法,找到了JQuery的开发文档,在Jquery的核心里面第一项就是jQuery([selector,[context]]),返回值是Jquery对象,使用方法:

在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。

$("div", xml.responseXML);

故此,我优化了一下自己的代码

$('h6',respText).each(function(tmp){
    console.log($(this).html());
});

这样显得简洁好看,代码又容易记忆。

本文作者:黄文勇
本文链接:https://www.3dcw.cn/index.php/archives/272/
最后修改时间:2020-05-29 17:46:45
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
评论已关闭