欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

探讨jQuery的ajax使用场景(c#)

程序员文章站 2022-06-11 12:52:27
一:jquery.ajax语法基础 jquery.ajax([options]) 概述:通过 http 请求加载远程数据。 jquery 底层 ajax 实现。简单易用的高层...

一: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.x 返回值(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是:

. 代码如下:


<%@ page language="c#" autoeventwireup="true" codebehind="default.aspx.cs" inherits="jqueryajax2._default" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://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);
            }
         nbsp;   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="https://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页面代码:

. 代码如下:


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静态页面的代码是:

. 代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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的异步使用场景基本满足我们的需求,自己试试看吧。