快速學習AJAX之七 AJAX修改使用者資料

來源:互聯網
上載者:User

哎,這節課程本來想繼續完善AJAX那個無重新整理上傳頭像的,可以後來測試了半天,覺得上傳圖片這個,效果可能不太好,所以今天得這個節課程,先實現AJAX修改資料,後面的課程中

將分開實現AJAX上傳大檔案課程,然後,在哪裡重點實現一下,這個進度顯示的功能。

好了,我們繼續我們的修改使用者資料,修改使用者資料,首先第一個需要我們做的就是,先顯示出所有的使用者資訊。
最新的網站結構,下面用箭頭標註的就是今天新增加了幾個檔案。

ShowStudent.htm增加如下代碼。

    <link href="Style/BaseStyle.css" rel="stylesheet" type="text/css" />    <script src="Js/BaseJs.js" type="text/javascript"></script>    <script type="text/javascript">        function getStudents() {            createXmlHttpRequest();            sendMethod("GET", "ShowStudent.ashx", null);        }        window.onload = getStudents();    </script></head><body>    <div id="returnLogin" style=" text-align:center">    </div></body>

這個就是直接去要資料了。然後 ShowStudent.ashx裡面增加如下代碼。

public void ProcessRequest(HttpContext context){    context.Response.ContentType = "text/html";    StringBuilder sb = new StringBuilder();    sb.Append("<table><tr><th>姓名</th><th>性別</th><th>郵箱</th><th>操作</th></tr>");    foreach (var item in User.GetUsers())    {        sb.Append("<tr><td>" + item.Name + "</td><td>" + item.Sex + "</td><td>" + item.Email + "</td><td><a href='EditStudent.htm?id="+item.Id+"'>修改</a></td></tr>");    }    sb.Append("</table>");    context.Response.Write(sb.ToString());}

當然,你需要新增加  User.GetUsers  這個方法

這個方法的內容,我依然是不解釋了,呵呵,ASP.NET取資料,然後我們接下來看效果。

 

好了,貯備工作完成了,簡單吧,

哦了,下面我們繼續完善我們的那個  User 類

這回我們要添加的根據  ID  得到一個學生的資訊。

哦,忘記了,我們先給我們的  這個 Table  修改一下,呵呵,加上編號,這個我只給大家一個了,就不顯示代碼了,但是請記住,我們的這個只是表格中的編號,可不是,資料庫中的ID欄位啊

單擊修改,之後,我們跳轉到 EditStudent.htm 頁面,當然你也可以在這個頁面一起實現,實現的方式很多,我們這裡為了簡單起見,就跳轉到

新的頁面


好了,跳轉成功了。那麼我們先寫下  EditStudent.htm 的代碼吧

    <link href="Style/BaseStyle.css" rel="stylesheet" type="text/css" />    <script src="Js/BaseJs.js" type="text/javascript"></script>    <script type="text/javascript">    function getUrlParam(name) {        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");        var r = window.location.search.substr(1).match(reg);        if (r != null)            return unescape(r[2]);        return null;    }    function getuser() {        createXmlHttpRequest();        sendMethod('GET', "EditStudent.ashx?id="+getUrlParam('id')+"",null);    }    window.onload = getuser();    </script></head><body>    <div id="returnLogin" style=" text-align:center">    </div></body>

其實就是得到  URL中的參數,注意這裡可以 用  JS 加Regex得到的啊。然後將資料發送到  EditStudent.ashx

頁面,在這裡面 有相應的處理邏輯。

public void ProcessRequest(HttpContext context){    context.Response.ContentType = "text/html";    var id = Convert.ToInt32(context.Request["id"].ToString());    var user = User.GetUser(id);    StringBuilder sb = new StringBuilder();    sb.Append(@"<input type='hidden' name=’id’ value='@id' />            <img style='width:150px; height:150px; margin:0 auto;' src='Upload/@url' name=’url’ id='image'/>            <table>             <tr><td>使用者名稱:</td><td><input type='text' name='name' value='@name' /></td><td></td></tr>            <tr><td>密碼:</td><td><input type='password' name='password' value='@password' /></td><td></td></tr>            <tr><td>E-mail:</td><td><input type='text' name='email' value='@email' /></td><td></td></tr>            <tr><td></td><td><input type='button' value='提交' /></td></tr>            </table>");    sb.Replace("@id", id.ToString()).Replace("@name", user.Name).Replace("@email",user.Email).Replace("@url",user.Photo).Replace("@password",user.PassWord);    context.Response.Write(sb);}

這裡我採用的是另一種,產生頁面的方式 就是替換法 我將一些特殊的資料,經過替換形成新的頁面。呵呵,仔細看一下吧。

User 類中新增加 一個  方法

這個方法寫好之後,就是我們這節課的主要內容了,好了,

首先修改我們的   EditStudent.ashx  檔案裡面的方法

public void ProcessRequest(HttpContext context){    context.Response.ContentType = "text/html";    if (context.Request["name"] == null)    {        var id = Convert.ToInt32(context.Request["id"].ToString());        var user = User.GetUser(id);        StringBuilder sb = new StringBuilder();        sb.Append(@"<form action='EditStudent.ashx' method='POST'><input type='hidden' name='id' value='@id' />            <img style='width:150px; height:150px; margin:0 auto;' src='Upload/@url'  id='image'/>            <table>             <tr><td>使用者名稱:</td><td><input type='text' name='name' value='@name' /></td><td></td></tr>            <tr><td>密碼:</td><td><input type='password' name='password' value='@password' /></td><td></td></tr>            <tr><td>E-mail:</td><td><input type='text' name='email' value='@email' /></td><td></td></tr>            <tr><td></td><td><input type='submit' value='提交' /></td></tr>            </table></form>");        sb.Replace("@id", id.ToString()).Replace("@name", user.Name).Replace("@email", user.Email).Replace("@url", user.Photo).Replace("@password", user.PassWord);        context.Response.Write(sb);    }    else {        User user = new User();        user.Id =Convert.ToInt32(context.Request["id"]);        user.Name = context.Request["name"];        user.PassWord = context.Request["password"];        user.Email = context.Request["email"];        var newuser = User.UpdateUser(user);        var htmldata = @"修改成功            <table>             <tr><td>使用者名稱:</td><td>@name</td><td></td></tr>            <tr><td>密碼:</td><td>@password</td><td></td></tr>            <tr><td>E-mail:</td><td>@email</td><td></td></tr>            </table>";        htmldata=htmldata.Replace("@name", user.Name).Replace("@email", user.Email).Replace("@url", user.Photo).Replace("@password", user.PassWord);        context.Response.Write(htmldata);    }}

上面就是我們的主要邏輯代碼,實現的功能當然是修改資料了啊,當然為了,簡單,我只修改了容易修改的幾個項目,姓名,密碼,郵件,其他的知識雷同了,呵呵。

 

哈哈,這修改即將完成了。  

幾點注意的地方,首先,我們第一次載入我們用的是 AJAX形式,第二次呢,我們採用的是Form表單的形式提交。注意到這一點就證明,你已經可以自己去寫自己的AJAX應用啦。

 

這節課 結束嘍。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.