jQuery学习笔录11（jQuery和ajax1-Load()& post()& get()）
来源：互联网 发布：男士网红淘宝店铺 编辑：程序博客网 时间：2024/06/06 14:15
jQuery对Ajax操作进行了封装。
最底层的方法：$.ajax()
第二层方法 ：$.load() , $.get() , $.post()
第三次方法：$.getScript() , $.getJSON()
Load()方法 ，通常用来从web服务器上获取静态的数据文件
Load()结构： load(url [,data] [,callback])
url: 类型 string ，请求HTML页面的URL地址
data: 类型Object ，发送至服务器的key or value数据
callback: 类型Function ，请求完成时的回调函数，无论请求成功或失败
例子Look
ajax.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajax2.aspx.cs" Inherits="ajax_ajax2" %><!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 runat="server"> <title>Untitled Page</title> <script src="../scriptJquery/jquery-1.3.2.min.js"></script></head><body> <form id="form1" runat="server"> <input type="button" id="send" value="Ajax获取" /> <div class="comment">已有评论</div> <div id="resText"></div> </form></body></html><script>$(function(){//等待dom元素加载完毕$("#send").click(function(){ //$("#resText").load("test.html"); //页面加载 $("#resText").load("test.html .para");//筛选页面加载内容： url selector })})</script>test.html<html ><head> <title>Untitled Page</title></head><body><div class="comment"> comments：</div><div class="comment" > <h6>zheng：</h6> <p class="para">soft</p></div><div class="comment" > <h6>Lee：</h6> <p class="para">chair</p></div><div class="comment" > <h6>King</h6> <p class="para">floor</p></div></body></html>
$.get() & $.post()
$.get() & $.post()是jQuery中的全局函数
$.get()方法
$.get(url [,data] [,callback] [,type])url:类型String ，请求的HTML页面的URL地址
data:类型Object ，发送到服务器的key或value，数据会作为Querystring附加到请求的URL中。
callback:类型Function ， 载入成功是回调函数（只有当Response的返回状态是success才调用该方法，这和load不一样），自动将请求结果和状态传递给该方法。
get的回调函数只有2个参数
function（data,textstatus）{
data :返回的内容，比如html片段，xml文档
textstatus：请求状态：success error timeout notmodified 4中
}
type：类型String，服务器返回内容的格式，比如xml，html，text，json等
例子,返回HTML片段：
ajax2.aspx
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <script src="../scriptJquery/jquery-1.3.2.min.js"></script></head><body> <form id="form1" runat="server" action="#"> <p>评论</p> <p>姓名：<input type="text" name="username" id="username" /></p> <p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p> <p><input type="button" id="send" value="提交" /></p> </form> <div class="comment">已有评论：</div> <div id="resText"></div> </body></html><script>$(function(){//等待dom元素加载完毕$("#send").click(function(){ $.get("test2.aspx", { username:$("#username").val(), content:$("#content").val() },function(data,textstatus){ alert(data) $("#resText").html(data);//返回的数据添加到页面上 }) })})</script>test2.aspx
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div class="comment"> comments：</div><div class="comment" > <h6>zheng：</h6> <p class="para">soft</p></div><div class="comment" > <h6>Lee：</h6> <p class="para">chair</p></div><div class="comment" > <h6>King</h6> <p class="para">floor</p></div><div class="comment" > <asp:Label ID="lbl" runat="server" ></asp:Label></div> </form></body></html>
test2.aspx.cs
public partial class ajax_test2 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { string username = Request.QueryString["username"].ToString(); string content = Request.QueryString["content"].ToString(); lbl.Text= "<h6>"+username+"</h6><p class='para'>"+content+"</p>"; }}
$.get()
将上面代码中$.get()改成$.post().
同时将querystring 改成form。运行。
另外，load()带有参数传递时，也可以使用load()方式实现同样的功能。
ajax2.aspx js脚本：
<script>$(function(){//等待dom元素加载完毕$("#send").click(function(){ $("#resText").load("test2.aspx",{ username: $("#username").val(), content : $("#content").val() })}) })</script>test2.aspx.cspublic partial class ajax_test2 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { string username = Request["username"].ToString(); string content = Request["content"].ToString(); lbl.Text = "<h6>" + username + "</h6><p class='para'>" + content + "</p>"; }}
- jQuery学习笔录11（jQuery和ajax1-Load()& post()& get()）
- JQuery中的load()、$.get()和$.post()详解
- JQuery学习(5-AJAX1)
- Jquery:Ajax1
- jQuery学习笔录10（jQuery和ajax）
- 10018---jQuery--Ajax(load,get,post方法）
- jQuery.get/post/load等简介
- JQuery ajax load(),get(),post()等
- Jquery中的ajax $.load,.$get,$.post
- jQuery get() 和 post() 方法
- jquery.post jquery.get
- 【学习笔记】jQuery中$.get()和$.post()的用法
- ASP.NET&C#学习笔录5（get和post的区别）
- jQuery学习笔录6（动画）
- jQuery Ajax(load,post,get,ajax) 实例 全解析
- jQuery Ajax(load,post,get,ajax) 实例 全解析
- jQuery Ajax(load,post,get,ajax) 实例 全解析
- jQuery Ajax(load,post,get,ajax)用法与详解
- python连接mysql报错
- Flex4中list与itemRenderer项目渲染器中子对象之间访问
- x264中16x16运动搜索过程(转)
- Bean Validation 规范内嵌的约束注解定义
- .net中webform和webform连接sql server 2000数据库的c#操作类
- jQuery学习笔录11（jQuery和ajax1-Load()& post()& get()）
- 如何在Android模拟器上添加和删除应用
- 32位Ubuntu 11.10下android2.3.7源码下载与编译小结
- 每个程序员都应该知道的一些时间数据
- 一个基于SVN 的代码提交量统计工具
- coffee-script
- ArcGIS Server代码动态创建发布服务（MapServer，ImageServer）
- devenv命令说明
- java.lang.IllegalStateException: No FacesContext is available to process this request的另一种处理方法
