jQuery使用ajax与后端通信

最新推荐文章于 2022-07-22 19:41:46 发布

qq_15318223

最新推荐文章于 2022-07-22 19:41:46 发布

阅读量547

点赞数

分类专栏： aspx

本文链接：https://blog.csdn.net/qq_15318223/article/details/90670298

版权

aspx 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前一直使用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中内容供其他面页判断是否登陆成功。