锋利的jQuery ajax(一)

最新推荐文章于 2020-02-13 22:07:50 发布

javaduqing

最新推荐文章于 2020-02-13 22:07:50 发布

阅读量699

点赞数

分类专栏： js/jquery/easyui 文章标签： jquery ajax jquery ajax load

本文链接：https://blog.csdn.net/disiwei1012/article/details/51279212

版权

js/jquery/easyui 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

说明

jQuery对Ajax操作进行了封装，在jQuery中$.ajax（）方法属于最底层的方法。

第一层：$.ajax()
第二层：load()、$.get()、$.post()
第三层：$.getScript()、$.getJSON()

1.load()

①载入远程的HTML代码，载入当前页结构为：
    load(url,data,function());

我们来看一个例子（主要实现当点击send标签的时候，将test.html的内容加载到resText元素里）：
demo1.html

<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
  $(function(){
      $("#send").click(function(){
              $("#resText").load("test.html");
      })
  })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />

<div  class="comment">
    已有评论：
</div>
<div id="resText" ></div>
</body>

test.html

<div class="comment">
 <h6>张三:</h6>
 <p class="para">沙发.</p>
</div>
<div class="comment">
 <h6>李四:</h6>
 <p class="para">板凳.</p>
</div>
<div class="comment">
 <h6>王五:</h6>
 <p class="para">地板.</p>
</div>

②筛选载入HTML代码

语法结构："url selector"
如果只需要加载test.html页面中class为“para”的内容，
$("tesText").load("test.html .para");

③传递方式

    load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用get方式，反之，则会转换成post方式。
    $("resText").load("test.html",{name:"rain",age:"22"}.function(){})

④回调函数

回调函数有三个参数，分别代表请求的返回的内容、请求状态和XMLHttpRequest对象
$("#resText").load("test.html",function(responseText,textStatus),XMLHttpRequest){
    //responseText:请求返回的内容
    //textStatus:请求状态：success、error、notmodified、timeout4种
    //XMLHttpRequest:XMLHttpRequest对象
}

javaduqing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锋利的jQuery ajax(一)

说明jQuery对Ajax操作进行了封装，在jQuery中$.ajax（）方法属于最底层的方法。第一层：$.ajax()第二层：load()、$.get()、$.post()第三层：$.getScript()、$.getJSON()1.load()①载入远程的HTML代码，载入当前页结构为： load(url,data,function());我们来看一个例子（主要实现当点击send标
复制链接

扫一扫

专栏目录