Jquery+ajax后台开发日志。

转载 2012年03月28日 16:52:00
我们在写asp.net网页的时候,会用到很多需要数据绑定的控件。Asp.net提供了数据绑定这一特性,确实方便了很多。但是这样的绑定都是在服务器端完成的,而我们有时会希望根据用户的选择来动态的更新其它一些控件的数据内容。例如用两个DropDownList来让用户选择所在的城市,一个绑定“省”一级的数据,如“浙江”、“吉林”等,另一个绑定用户选择的“省”下面的城市。要实现这样一个动态的数据绑定其实不难,可以把前一个DropDownList的autopostback属性设成true,然后在事件里绑定后一个DropDownList的数据就可以了。这样虽然是可以实现动态数据绑定,但是用户每选一个选项,网页就不得不刷新一次,内容一多,就很浪费时间。那有没有不刷新页面但又能动态绑定数据的方法呢?当然有!方法就是用现在十分流行的Ajax技术。       Ajax的应用十分广泛,这里仅仅介绍利用JQuery来实现异步数据更新的方法。jQuery 是一个JavaScript 库,它有助于简化 JavaScript? 以及 Asynchronous JavaScript + XML (Ajax) 编程。在JQuery中有一个Ajax的调用方法:

$.ajax({

type: "POST",

url: window.location.protocol + "//" + window.location.host + “a.aspx”,

data: postdata,

complete: function(msg){

ShowResult(msg.responseText);

} ,

dataType : "html"

});

     这里的url是目标页面,通常我们会专门处理这些Ajax请求,单独写一个页面,这里假定为ajax.aspx。data是你要post给目标页面的数据,例如“do=getcity&province=100”。Complete里的那个function:ShowResult(msg.responseText);是用来处理Ajax的返回结果的,结果会以html的形式保存在参数msg.responseText里。

        了解了这个Ajax的调用方法,我们来说说到底怎样实现数据的动态绑定。还是以刚才说的“选择城市”作为例子。首先在你要显示的页面(例如Selectcity.aspx)有一个空的DropDownList(这个是用来选择“城市”的,不是那个选择“省份”的),在其外面包一个<div>标签,id为city。这个是假的,只是在那里占个位子,真正的数据并不会绑定到这个控件上。然后我们在Ajax页面ajax.aspx里也放一个一模一样的DropDownList。然后我们绑定选择“省份”的那个DropDownList的onchange事件(以下所说的事件,都是javascript事件,而非asp.net事件),让其调用我们的ajax方法。然后,ajax会把用户选择的“省份”放在postdata里(如“do=getcity&province=100”)传到Ajax.aspx页面,页面获得这个参数后,为ajax.aspx上的DropDownList绑定数据。结果以html的形式保存到msg.responseText里。

      接下来要怎么做也许你已经想到了,对了,我们要用的就是“狸猫换太子”的手段。前面调用ajax方法的时候,不是还有一个ShowResult的方法吗?那个方法在获得了我们ajax页面的返回结果。我们知道,DropDownList最终生成的<select>空间,所以我们把返回结果里从“<select>”到“</select>”之间的部分提取出来,替换到那个id=city的div的innerHTML里,覆盖原来占位的那个DropDownList。于是,我们的动态数据绑定就完成了。

        不知道你听明白了没有,下面给出文中提到的各个文件的源码,如果你没有看明白,就自己捉摸捉摸吧^_^

Ajax.js

function GetCity(provinceID)

{

    $.ajax({

              type: "POST",

              url: window.location.protocol + "//" + window.location.host + "/Ajax.aspx",

              data:   "do=GetCity&ProvinceID=" + provinceID,

              complete: function(msg){

                                ShowCity(msg.responseText);

                       } ,

              dataType : "html"

             });   

}

function ShowCity(strCode)

{

    var obj = document.getElementByid("City");

    var start = strCode.indexOf("<select");

    var end = strCode.indexOf("</select>") + 9;

    var strHtml = strCode.substring(start,end);

        

    if (obj!=null)

    {       

        obj.innerHTML = strHtml;                         

    }

}

Selectcity.aspx

<%@ Page language="c#" Codebehind="Selectcity.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>

<html>

<head>

                   <title>Selectcity</title>

    <script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>

    <script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>

</head>

         <body topmargin="0" marginwidth="0" marginheight="0">

                   <form id="Form1" method="post" runat="server">

                            <asp:DropDownList ID="province" runat="server"></asp:DropDownList>

                            <div id="city">

                                     <asp:DropDownList ID="oldcity" runat="server"></asp:DropDownList>

                            </div>

                   </form>

         </body>

</html>

Selectcity.aspx.cs

这个就不给了,随便给那个ID= province的DropDownList绑定点数据即可。

ajax.aspx

<%@ Page language="c#" Codebehind="Ajax.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>

<html>

<head>

                   <title>Selectcity</title>

    <script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>

    <script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>

</head>

         <body topmargin="0" marginwidth="0" marginheight="0">

                   <form id="Form1" method="post" runat="server">

                            <asp:DropDownList ID="city" runat="server"></asp:DropDownList>

                   </form>

         </body>

</html>

Ajax.aspx.cs(只列出关键代码,其它的省略)

protected void Page_Load(object sender, EventArgs e)

{

    string strAction = Request.Form["do"] + String.Empty;

    switch (strAction)

    {

        case "GetCity":

            GetCity();

            break;

    }

}

protected void GetCity()

{

    string strProvinceID = Request.Form["ProvinceID"] ?? String.Empty;

    if (!String.IsNullOrEmpty(strProvinceID))

    {

        List<City> CityList = /*你要绑定的数据*/;

        this.City.DataTextField = "CityName";    //这里的city就是前面aspx的DropDownList

        this.City.DataValueField = "CityID";

        this.City.DataSource = CityList;

        this.City.DataBind();

    }

}


跨域加载:
var serverUrl = "http://localhost:2424/MyServer/RetrieveMasterData.aspx";
            $.ajax({
                url: serverUrl,
                type: 'POST',
                dataType: 'jsonp',
                data: { MasterDataID: 1 },
                success: function(response) {
                        ...... business logic here
                },
                error: function(xhr, ajaxOptions, thrownError) {
                        ...... error handling something here
                }
            });
============

Because the request is not in the same domain, and I solved the problem by adding jqm config that:

$( document ).bind( "mobileinit", function() {
  // Make your jQuery Mobile framework configuration changes here!

  $.mobile.allowCrossDomainPages = true;
});

And this is a link: http://jquerymobile.com/demos/1.0/docs/pages/phonegap.html




jquery ajax请求记录日志

ajax请求可通过beforeSend 和

jquery ajax接收后台传值

  • 2013年11月21日 10:55
  • 741B
  • 下载

玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互

最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到...

jQuery AJAX实现调用页面后台方法

 Add1: 使用AJAX访问aspx页面和asmx使用方法是一样的,区别在于aspx页面中的方法必须为静态方法,而asmx不需要. 1.新建demo.aspx页面。 2.首先在该页面的...

Ajax的jquery与后台交互

  • 2011年04月22日 10:23
  • 45KB
  • 下载

jquery ajax验证用户名是否存在(后台spring mvc)

controller层 @ResponseBody @RequestMapping(value = "/user/isExist", produces = "application/json...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery+ajax后台开发日志。
举报原因:
原因补充:

(最多只允许输入30个字)