第1回——Web前端经典demo（新建用户弹窗，EasyUI+JQurey）

来源：互联网发布：淘宝卖家怎么设置积分编辑：程序博客网时间：2024/05/22 05:32

问题描述：定义一个“新建用户”的按钮，点击按钮出现弹出窗口，里面有需要输入的用户信息。输入后点击提交，提交后交给后台处理，后台把得到数据简单处理后返给前台相应的参数，前台显示添加成功或失败的相关信息。

首先是创建一个html文件如下：（具体见注释）

注意：1，引入easyui文件的同时还需要引入相关的图片

<!DOCTYPE html>

</head>

function operation(click_type) { //定义operation方法，传入参数设置为click_type

var name = $("#name").val();

var pwd = $("#pwd").val();

var department = $("#department").val();

var role = $('#role').combobox("getText"); //var role = $("#role").val(); 这样得到的是选中项的value

var email = $("#email").val(); //得到文本框的一系列信息，知识点1

var request_data;

if (click_type == "newAddUser") {

request_data = { 'click_type': 'newAddUser', 'newusername': name, 'newuserpwd': pwd, 'newuserdepartment': department, 'newuserrole': role, 'newuseremail': email };

} //向后台传的数据，格式为json，便于-->nvc

$.ajax({

url: "AddNewUserHandler.ashx", //后台一般处理程序名称

type: "POST",

data: request_data,

dataType: "text", //类型为text，知识点2

success: function (data, textStatus, jqXHR) {

var datatemp = data; //data为从后台接收的数据，类型为text

if (datatemp == "right") {

switch (click_type) {

case "newAddUser":

$.messager.alert("提示", "新建用户成功！");

break;

}

else {

$.messager.alert("警告", '对不起！,输入的字符长度太短！！');

}

error: function (jqXHR, textStatus, errorThrown) {

$.messager.alert("警告", '对不起！,出错了！！'+"errorThrown:" + JSON.stringify(errorThrown) + " textStatus:" + textStatus + " jqXHR:" + JSON.stringify(jqXHR));

}

});

}

$(document).ready(function () {

$("#newAddUser").click(function () { //点击执行的事件，需在$(document).ready中

$("#newAddUser_window").window("open");

});

$("#userbtn_save").click(function () {

operation("newAddUser");

});

</script>

<body>

<form id="form1" runat="server"> //前台easyui代码，一个按钮，一个窗体，知识点3

<div>

<a id="newAddUser" href="#" style="float:left" class ="easyui-linkbutton"

data-options="iconCls:'icon-add',width:100,height:35" >新建用户</a>

</div>

<div>用户名:

</div>

<div>密码:

</div>

<div>部门:

</div>

<div>角色：

<option value="XT">系统管理员</option>

<option value="XM">项目管理员</option>

</select>

</div>

<div>Email:

</div>

</div>

</form>

</body>

</html>

接下来是后台的一般处理程序，聪ajax中可以看到叫做AddNewUserHandler.ashx。

using System;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Linq;

using System.Web;

namespace EasyUI

{

/// <summary>

/// AddNewUserHandler的摘要说明

/// </summary>

public class AddNewUserHandler : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

if (context.Request.HttpMethod == "POST")

{

//前台如果是post方法，则得到前台传进的json字符串

NameValueCollection nvc = context.Request.Params; //得到前台传值，nvc很强大

String clicktype = nvc["click_type"];

if (clicktype == "newAddUser")

{

string name = nvc["newusername"];

string password = nvc["newuserpwd"];

string roleid = nvc["newuserrole"];

string department = nvc["newuserdepartment"];

string email = nvc["newuseremail"];

string tag = name + password +roleid+ department+email;

if (tag.Length>15)

{

context.Response.Write("right"); //往前台传的参数

}

else

{

context.Response.Write("errorsuccessadduser");

}

else

{

context.Response.Redirect("Login.aspx");

}

public bool IsReusable

{

get

{

return false;

}

学到的知识：知识点1：var email = $("#email").val(); 这是获取文本框的值的格式，

var role = $('#role').combobox("getText");获取下拉框中的文本值

var role = $("#role").val(); 这样得到下拉框中的选中项的value，在角色中有定义。

知识点2：ajax里面的dataType类型为String，可用值为：

•"xml":返回 XML文档，可用 jQuery处理。

                                    •"html":返回纯文本 HTML信息；包含的 script标签会在插入 dom时执行。
                                    •"script":返回纯文本 JavaScript代码。不会自动缓存结果。除非设置了 "cache"参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET请求。（因为将使用 DOM的 script标签来加载）
                                    •"json":返回 JSON数据。
                                    •"jsonp": JSONP格式。使用 JSONP形式调用函数时，如 "myurl?callback=?" jQuery将自动替换 ?为正确的函数名，以执行回调函数。
                                    •"text":返回纯文本字符串

知识点3：关于EasyUI的按钮和弹窗的设计可以参考：http://www.jeasyui.net/

没必要记，熟能生巧，忘了就看一下。

共同进步。

0 0