• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mui.ajax()和asp.netsql服务器数据交互【1】

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

简单的ajax和asp.net的交互,例如遍历数据,前端显示复杂内容没有添加代码,可自行研究!非常适合懂那么一点点的我们!

实现步骤:

1、APP前端HTML:

<div class="mui-input-row">
<label>账号:</label>
<input >这里显示从服务器获取到的密码</div>

 

2、APP前端JavaScript:

mui.init();
mui.ready(function() {
var btnLogin = document.getElementById("btnLogin");
var names=document.getElementById("name");
btnLogin.onclick = function() {                                      
var url="http://localhost/myStudy/APP/Handler.ashx";    //AJAX的url,把asp.net下的Handler.ashx用浏览器打开,复制地址即可
mui.post(url, {
name:names.value,                                                        //向asp.net下的Handler.ashx传递数据
}, function(data) {
//服务器返回响应,根据响应结果,分析是否登录成功;
var jsonstr = JSON.stringify(data); //将data(后台获取的result字符串,相当于JavaScript的值)转化为json字符串
//console.log(jsonstr);
var jsonobj=JSON.parse(jsonstr); //将json字符串转化为JavaScript对象
//console.log(jsonobj);
var divinner=document.getElementById("div");
divinner.innerHTML=jsonobj.password;


}, 'json');
};
});

 

3、asp.net 配置web.config:<system.webServer>节点下添加

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="X-Requested-With"/>
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
</customHeaders>
</httpProtocol>

(据说是为了支持跨域)

4、asp.net创建新文件夹,添加新项一般处理程序 Handler.ashx;

public SqlConnection getcon()
{
    string M_str_sqlcon = "Server=(local);Initial Catalog=userlogin ;Uid=sa ;Pwd=sa ;";
    SqlConnection myCon = new SqlConnection(M_str_sqlcon);
    return myCon;
}

DataTable mytable = new DataTable();

public DataTable gettable(string M_str_sqlstr)
{
     SqlConnection sqlcon = this.getcon();
     SqlDataAdapter sqlda = new SqlDataAdapter(M_str_sqlstr, sqlcon);
     sqlda.Fill(mytable);
     sqlcon.Close();
     sqlcon.Dispose();
     return mytable;
}
public void ProcessRequest (HttpContext context) {
     context.Response.ContentType = "application/json";
     string name = context.Request.Params["name"];                   //获取前端传过来的数据
     string strsql= "select password from login where username = '"+name+"'";          //查询数据库
     DataTable dt = gettable(strsql);                                                                            //获取DataTable
     if (dt.Rows.Count > 0 && dt != null)
          {
             string result = "{\"password\":\"" + dt.Rows[0]["password"].ToString() + "\"}";   //设置字符串result,此处为JavaScript的值,需要前端将这个值转化为json字符串
             context.Response.Write(result);                                                                       //给前端传递字符串result
          }
}
public bool IsReusable {
                  get {
                               return false;
                          }
}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
asp.net中的绝对路径和相对路径发布时间:2022-07-10
下一篇:
asp.net下拉列表框发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap