jQuery学习笔录11（jQuery和ajax1-Load()& post()& get()）-CSDN博客

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7662841

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.cs
public 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>";
    }
}