`
夏末忆逝
  • 浏览: 147191 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery学习笔记--ajax应用

 
阅读更多

直切主题,介绍方法
$("#div").load(url,data,callback);
url:String类型 请求HTML页面的URL地址
data(可选) Object类型 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

url
注: url部分,可填写过滤器,得到符合条件的数据返回  语法结构 "url selector" url和选择器之间有一个空格
例: $("#div").load("test.html .seleted");

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

回调参数
对于必须在加载完成后才能继续的操作,load()方法提供了回调参数(callback),该参数有3个参数,分别代表请求返回的内容,请求状态(success和error)和XMLHttpRequest对象
$("#div").load("test.jsp",function(responseText,textStatus,XMLHttpRequest){
        //responseText 请求返回的内容
        //textStatus:success,error,notmodified,timeout4种
        //XMLHttpRequest对象

}）



从其他网站copy的总结的相当完善 

jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load(),$.get()和$.post()方法，第三层是$.getScript()和$.getJson()方法。首先介绍第2层得方法，使用效率很高。

load()方法

1.载入HTML文档
load()方式jQuery中最为简单的Ajax方法，能载入远程HTML代码并插入DOM中，它的结构为:
load(url[,data][,callback]);
load()方法参数解释如表6-1所示。
 
load参数说明：
参数名称    类型           说明
url        string       请求html的url地址
data(可选) object       发送至服务器的key/value数据
callback   function     请求完成时的回调函数，



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { 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-1.3.1.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>
</html>

test.html 页面里并没有添加样式，但现在加载的内容有样式了，这些样式是在主页面中添加的，
即主页面相应的样式会立即应用到新加载的内容上。


传递方式
load()方法得传递方式根据参数data来自动指定，如果没有参数传递，则采用get方式传递;反之，
则自动转换为post方式。

//无参数传递
$("#resText").laod("test.php",function(){
  
});
//有参数传递，则是post方式
$("#resText").laod("test.php",{name:"rain",age:"22"},function(){

});


回调参数
对于必须加载完后才能继续操作，load()方法提供了回调函数(callback),该函数有3个参数，
分别代表请求返回的内容，请求状态和XMLHttpRequest 对象，jQuery代码如下:
$("#resText").laod("test.html",function(responseText,textStatus,XMLHttpRequest)){
    //请求返回的内容
    //请求状态  success error notmodiffed,timeout 4种
    //XMLHttpRequest:     XMLHttpRequest
}

在load()方法中，无论Ajax请求是否成功，只要当请求完成complete后，回调函数(callback)就被触发，对应下面将介绍$.ajax()方法中的complete回调函数。




$.get()方法和$.post()方法
laod()方法通常用来从web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值，在项目中，如果需要传递一些参数给服务器的页面，那么可以使用$.get()或者
$.post()方法，或者是$.ajax()方法。
$get()和$post()方法是jQuery中的全局函数，而在此之前得jQuery方法都是对jQuery对象进行操作的。

$.get()方法
$.get()方法使用GET方式来进行异步请求。
它的结构为
$.get(url[,data][,callback][,type])
$.get()方法参数解释

参数名称           类型                         说明
url                string                 请求的HTML页的URL地址
data(可选)         object                 发送至服务器的key/value数据会作为QueryString附加到请求url中
callback(可选)     function               载入成功时回调函数(只有当response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选)         string                 服务器端返回内容的格式,包括xml,html,script,json text 和_default

(1) 使用参数
首先，需要确定请求页面的URL地址
$("#send").click(function(){
    $.get("get1.php",data参数，回调函数);
});
然后，在提交之前，需要获取 "姓名" 和 "内容" 的值为data参数传递给后台。
$("#send").click(function(){

  $.get("get1.php"),{
        username:$("#usernmae").val(),
        content:$("#content").val()
        },回调函数
     }
} )
$.get()方法得回调函有两个参数
function(data,textstatus){
//data 返回的内容，可以使xml文档，json文件，HTML片段等等
//testStatus: 请求状态: success,error,notmodified,timeout4种
}
data 代表请求的参数，state代表请求的状态，回调函数只有当翻书success可以被调用。

由于服务器端返回的数据格式可能有多种，他们都可以完成同样的任务，分别介绍一下

HTML片段
返回的是HTML片段，不需要特殊的处理，就可以将新的数据插入到主页面中。
$(function(){
    $("#send").click(function(){
     $.get("get1.php",{
      username: $("#username").val(),
      content: $("#content").val()
      },function(data,textStatus){
         $("#resText") .html(data);//将返回的数据添加到页面上
      });
})
})
HTML 片段实现起来比较简单，但是不一定能够在其他的web应用程序中得到重用。



处理XML文档
游湖服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理，前面的章节已经介绍过jQuery强大的DOM处理能力，处理XML文档与处理HTML文档一样
可以使用常规的attr(),find(),filter()以及其他方法
$(function(){
   $("#send").click(function(){
     $get("get2.php",{
      username:$("#username").val(),
      content:$("#content").val()
     },function(data,textStatus){
      var username = $(data).find("comment").attr("username");
      var content =  $(data).find("comment content").text();
      var txtHtml = "<div class='comment'><h6>"
       +username+":</h6><p class='para'>"
       +content+"</p></div>";
      $('#resText').html(txtHtml);//将返回的数据添加到页面上
     })
   })
})

json 文件
xml文档体积大和难以解析.json 文件和xml文档一样，也可以方便的被重用,而且json 文件简洁，容易阅读
由于服务器返回的数据格式是json 文件，因此需要对放回的数据进行处理之后，才可以将新的HTML数据调价到主页面中。
$(function(){
  $("#send").click(function(){
     $("get3.php",{
      username:$("#username").val(),
       content:$("#content").val()
     },function(data,textStatus){
       var username = data.username;
       var  content = data.content;
       var  txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>;
       $("#resText").html(textHtml);
      })
  })
},"json")
在上面的代码中，将$.get()方法得第4个参数(type)设置为json 来代表期待服务器端返回的数据格式。

$.post()方法
它与$.get()方法得结构和使用方式多相同，不过他们之间仍然有一些区别
GET 请求会将参数跟在URL后进行传递，而POST 请求则是作为HTTP消息的实体内容发送给WEB服务器。
当然在ajax请求中，这种区别对用户是不可见的。
 
GET 方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要不GET方式大的多(理论上不受限制)。

GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。
在某种情况下，GET方式会带来严重的安全性问题，而POST 方式相对来说可以避免这些问题。

 
建议是用POST请求
$(function(){
   $("#send") .click(function(){
     $post("post1.php",{
      username:$("#username").val(),
      content:$("content").val()
     },function(data,textStatus){
       $("#resText").append(data);  //将返回的数据添加到页面上
     });
   });
})


$ajax()方法不仅能实现与load(),$.get() 和$.post()方法相同的功能，而且还可以设定beforeSend(提交钱回调函数)，
error(请求失败后处理),success（请求成功后处理）以及complete（请求完成后处理）回调函数，通过这些回调函数，可以给用户更多的ajax提示信息
另外，还有一些参数，可以设置Ajax请求的超时时间或者页面的“最后更改 ”状态等等。关于$.ajax()方法将在后面的章节中进行详解。


$getScript方法和$getJson方法
1.$getScript()
有时候，在页面初次加载时就去的所需的全部JavaScipt文件是完全没有必要的，虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签，jQuery代码如下:
$(document.createElement("script")).attr("src","test.js");.appendTo("head");
或者
$("<script type='text/javascript' src='text.js'/>").appendTo("head");
这种方式并不理想，jquery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便。不要对javascript文件进行处理。
$(function(){
   $("#send").click(function(){
     $.getScript('test.js'); 
   });
})


$getJSON()
$getJSON()方法用于加载JSON文件，与$.getScript()方法得用法相同。

jQuery代码如下：
$(function(){
   $('#send').click(function(){
     $.getJson('test.json');
   })
})
单击按钮"加载"按钮后，网页上没有效果，虽然加载了json文件但是并没有告诉javascript对返回的数据处理，为此jquery 提供回调函数,在回调函数里面处理返回的数据。
$(function(){
    $("#send").click(functioin(){
        $.getJSON('test.json',function(data){
           //data 返回数据
       })
    })
})

可以在函数中通过data变量来遍历相应的数据，也可以使用迭代方式为每个项构建相应的HTML代码。
$each()函数不同于jQuery对象的each()方法，它是一个全局函数，不操作jQuery对象，而是以一个数组或者对象作为第1个参数，
以一个回调函数作为第2个参数，回调函数拥有两个参数，第1个位对象的成员或数组的索引，第2个为对应变量或内容。

$(function(){
$('#send').click(function(){
    $.getJSON('test.json',function(data){
      $('#resText').empty();
      var html='';
      $each(data,functioin(commentindex,comment){
        html+='<div class="comment"><h6> '
        +comment['username']+':</h6><p class="para">'
        +comment['content']+'</p></div>';
      });
     $("#resText").html(html);
    })
})

})

序列化 serialize()
当使用$.ajax({
        url:"",
        data: $('#form').serialize() ,
        ....
      })

data中如果需要传的数据很多狠复杂,就可以使用序列化这个方法,他可以把表单元素全部序列化传到后台,比一个一个写要传的元素方便很多

serializeArray()方法是将dom元素序列化,返回json格式的数据




分享到：
| android创建表主键为自增的解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery学习笔记--1

    **jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识，包括其核心概念、选择器、DOM操作、事件...

    jquery学习笔记-相关代码

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念，通过实例代码来加强理解和应用。 1. **jQuery选择器**:...

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    现代Web开发中，jQuery、AngularJS、Vue.js等库和框架提供了更简洁的Ajax调用API，简化了异步请求的编写。 #### 3. WebService 通过WebService，开发者可以创建服务端接口，然后使用Ajax调用这些接口，获取或发送...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个javascript框架，...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...

    jQuery学习笔记（一）

    **jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    AJAX学习笔记----jquery+servlet实现用户名验证

    NULL 博文链接：https://persistc.iteye.com/blog/264072

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...

    JS-Ajax-jQuery笔记1

    JS-Ajax-jQuery笔记，学习笔记，JavaScript，JS-Ajax-jQuery笔记，学习笔记，JavaScript，

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    jquery 学习笔记

    **jQuery学习笔记** jQuery，作为一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧，帮助初学者快速上手。 ## 一...

    jquery-1.3.1-vsdoc.rar

    《jQuery 1.3.1 VSDOC：深入理解与应用》 jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript编程，特别是对于DOM操作、事件处理、动画效果以及Ajax交互等方面。本篇文章将深入探讨jQuery 1.3.1版本，...

    jquery 学习笔记源码 1-3章

    《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容，是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，因其简洁的语法和强大的功能，深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery，无论你是初学者还是有...

    javascript and jquery学习笔记与资料

    这里，我们有针对这两个主题的学习笔记和参考资料，包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先，`JavaScript培训.zip`可能包含的是对...

    JQuery学习笔记（技术文档）

    ### JQuery学习笔记（技术文档） #### 一、JQuery能做什么？ JQuery 是一款轻量级的 JavaScript 库，它的设计宗旨是“write less, do more”，即“写得更少，做得更多”。通过JQuery，可以实现以下功能： 1. **...

Magicbox
Global site tag (gtag.js) - Google Analytics