jQuery的ajax使用场景讨论（c#）

最新推荐文章于 2024-03-05 23:02:03 发布

weixin_34413103

最新推荐文章于 2024-03-05 23:02:03 发布

阅读量149

点赞数

文章标签： json xhtml javascript ViewUI

一：jQuery.ajax语法基础

jQuery.ajax([options])
概述：通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。
数据类型
$.ajax()函数依赖服务器提供的信息来处理返回的数据。通过dataType选项还可以指定其他不同数据处理方式。其中，text和xml类型返回的数据不会经过处理。如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。发送数据到服务器，默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
使用场景一：
描述:保存数据到服务器，成功时显示信息。jQuery 代码:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
使用场景二：
描述:装入一个 HTML 网页最新版本。jQuery 代码:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
    $("#results").append(html);
}
});

load(url, [data], [callback])
概述：载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
使用场景一：
描述:加载 feeds.html 文件内容。jQuery 代码:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])

概述：通过远程 HTTP GET或POST 请求载入信息。
这是一个简单的 GET或POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
描述:显示 test.aspx 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。jQuery 代码:
$.get("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

上面是基本的语法，我们只是先做一个了解，要是你已经熟悉，那么我们将开始一步一步对上面的方法和使用场景进行具体讨论。

二：jQuery.ajax伴随ASP.NET的实战练习

首先创建Default.aspx页面，作为请求发起页面，并会获得返回值。页面的代码Default.aspx是：

View Code

<%@ Page Language= " C# " AutoEventWireup= " true " CodeBehind= " Default.aspx.cs " Inherits= " JqueryAjax2._Default " %>
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script src= " js\jquery-1.6.2.min.js " type= " text/javascript "></script>
<script type= " text/javascript ">
    $(function() {
        $( ' #showinfo ').click(function() {
             var data = { key1: " 刘明丰 ", key2: " 林望 " };
            $.ajax({
                type: " POST ",
                url: " response.aspx ",
                data: data,
                dataType: " text ",
                success: function(msg) {
                    $( " #ajax ").append(msg);
                }
            });
            $.ajax({
                url: " test.htm ",
                cache: false,
                success: function(html) {
                    $( " #resulthtml ").append(html);
                }
            });
            $( " #load ").load( " test.htm ");
            $. get( " response.aspx ", data, success1, " text ");
            $. get( " TextJson.txt ", success3, " json ");
            $.post( " response.aspx ", data, success2, " text ");
            function success1(message) {
                $( " #get ").append(message);
            }
            function success2(message) {
                $( " #post ").append(message);
            }
            function success3(siteData) {
                 var result = " <li>334一号床: " + siteData.key1 + " </li> ";
                result += " <li>334二号床: " + siteData.key2 + " </li> ";
                result += " <li>334三号床: " + siteData.key3 + " </li> ";
                result += " <li>334四号床: " + siteData.key4 + " </li> ";
                $( " #result ").html(result);
            }
        });
    });
</script>
<html xmlns= " http://www.w3.org/1999/xhtml " >
<head runat= " server ">
    <title></title>
</head>
<body>
<input type= " button " id= " showinfo " value= " show info "></input>
     <ul id= " ajax ">ajax:</ul>
     <ul id= " resulthtml ">resulthtml:</ul>
     <ul id= " load ">load:</ul>
     <ul id= " get "> get:</ul>
     <ul id= " post ">post:</ul>
     <ul id= " result "></ul>

</body>
</html>

Default.aspx.cs里面有没写任何代码，默认即可。
请求的接受者这里面有三种角色：response.aspx页面、test.htm静态页面和TextJson.txt。

response.aspx页面：主要是在服务器端获得客户端提交的数据，并返回数据给客户端。
test.htm静态页面：主要是给客户端局部装入一个HTML网页最新版本。
TextJson.txt：是作为数据储存在文件中，让客户端来异步访问的。

response.aspx页面代码，response.aspx是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

没有任何html代码，因为主要是在服务器端获得客户端提交的数据，并返回数据给客户端，不需要显示html内容，所以可以不含html标记。
response.aspx.cs页面代码：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;

namespace JqueryAjax2
{
     public partial class response : System.Web.UI.Page
    {
         protected void Page_Load( object sender, EventArgs e)
        {
             string str = Request[ " key1 "];
            Response.Write( " success " + str);
        }
    }
}

在代码中可以看到服务器端获得客户端提交的数据，并返回数据给客户端的方式。

test.htm静态页面的代码是：

View Code

<!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>
</head>
<body>
test.html
</body>
</html>

当静态页面被请求后，会作为html的格式返回客户端，使用 $("#resulthtml").append(html);这样的方法来显示test.htm静态页面的内容。

TextJson.txt里面保存着一段文本，是json格式的：

{ "key1": "刘明丰", "key2": "林望", "key3": "陈文杰", "key4": "耿殿佳" }

在被访问后返回的是json格式的数据，在客户端获得json后会自动转换成对象。

好了，jQuery的异步使用场景基本满足我们的需求，自己试试看吧。

weixin_34413103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的ajax使用场景讨论（c#）

一：jQuery.ajax语法基础jQuery.ajax([options])概述：通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。数据类型 $.ajax()函数依赖服务器提供的信息来处理返回的数据。通过data...
复制链接

扫一扫