ajax無重新整理儲存使用者提交資料

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

ShowStudent.htm增加如下代碼。

<link href="Style/BaseStyle.css教程" rel="stylesheet" type="text/css" />    <script src="Js/BaseJs.js" type="text/網頁特效"></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);    }}

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More