之前一直使用aspx面页展示数据和做交互,但是每次点击asp控件时,都会将整个面页重新刷新,对客户端和服务器来说都是非常繁重的负担。因此我尝试使用html面页展示数据。html基本上都是用javascript做前端的逻辑,js与后端通信不容易,目前可以借助jQuery框架的ajax进行通信。
我的服务器是三丰云申请的免费云服务器,三丰云还可以申请免费虚拟主机,但是不能支持aspx网站,所以我用的云服务器自己安装一个windows系统,使用里面的IIS搭建aspx网站,网站上跑的就是后端的处理逻辑api,前端ajax使用post方法将数据推送至api,api函数将数据做计算和存储。
后端的方法Jobs.asmx.cs
using System;
using System.Web;
using System.Web.Services;
namespace Server
{
/// <summary>
/// Jobs 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class Jobs : System.Web.Services.WebService
{
[WebMethod]
//检查登录信息,如下是用户名与密码
public int CheckLog(string uname,string pwd)
{
Datas ds=new Datas();
int uid = -1;
try { uid = ds.CheckUser(uname, pwd); }//具体的数据库查找逻辑这里不给出
catch (Exception ex)
{ modles.Log.Write(ex.Message); }
//Session["uid"]=uid;
return uid;
}
}
}
以上api服务用于判断用户名与密码,返回-1时说明用户名与密码错误,否则返回用户的逻辑编号(datas中实现),需要前端将用户名与密码推送过来。
log.js前端代码如下:
$("#submit").click(() => {
$.post(
"../Jobs.asmx/CheckLog",
{ uname: $("#uname").val(), pwd: $("#pwd").val() },
(data) => {
//console.log($data);
var uid = ($(data).find("int").text());
if (uid == '-1')
$("#logResult").text("用户名或密码错误!");
else {
sessionStorage["uid"] = uid;
self.location = "result.html";
}
}
);
});
前端的html上有id=uname和id=pwd的文本框,id=logResult的lable用于显示登陆的错误信息。若登陆成功,js将用户的逻辑好存在sessionstorage中,并跳转至result面页。session中内容供其他面页判断是否登陆成功。