jQury+Ajax与C#后台交换数据
-------------------------------------------jQury+Ajax调用后台方法-------------------------------------------
JS:
function CarState(carID) {
$.ajax({
type: "Post",
url: "ShowMap.aspx/GetCarState",
//方法传参的写法一定要对,str为形参的名字
data: "{'carid':'" + carID + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//返回的数据用data.d获取内容
alert(data.d);
}
});
}
后台:
using System.Web.Script.Services;
using System.Web.Services;
[WebMethod]
public static string GetCarState(string carid)
{
return "Hello world!";
}
-------------------------------------------jQuery+Ajax提交表单-------------------------------------------
HTML:
<form id="form1" class="form form-horizontal" action="Login.aspx" method="post" style="margin-left:-10px;margin-top:-10px">
<div class="row cl" style="margin-top:60px;">
<div class="formControls col-8" style="margin-top:-5px;">
<input id="t_name" name="t_name" type="text" placeholder="账户" autocomplete="off" class="input-text size-L" value="" />
</div>
</div>
<div class="row cl">
<div class="formControls col-8" style="margin-top:-5px;">
<input id="t_pwd" name="t_pwd" type="password" placeholder="密码" autocomplete="off" class="input-text size-L" value="" />
</div>
</div>
<div class="row">
<div class="formControls col-8 col-offset-3">
<input id="b_submit" type="submit" class="btn btn-success radius size-L" value="登录" onclick="validate(); return false;" />
<span id="loading" class="btn btn-success radius size-L hidden">登录中...</span>
</div>
</div>
</form>
JS:
<script src="Scripts/jquery-1.11.3.js"></script>
<script src="Scripts/jquery.form.js" ></script>
<script src="Scripts/layer/layer.js"></script>
<script type="text/javascript">
function validate() {
if ($("#t_name").val() == "") {
layer.msg("请输入账户名!");
} else if ($("#t_pwd").val() == "") {
layer.msg("请输入密码!");
} else {
$("#form1").ajaxSubmit({
dataType: "json",
beforeSubmit: function () {
$("#b_submit").hide();
$("#loading").removeClass("hidden");
}, success: function (resp) {
if (resp.res == 1) { //登录成功
window.location.href = resp.data;
} else { //登录失败
$("#b_submit").show();
$("#loading").addClass("hidden");
$("#t_code").val("");
layer.msg(resp.msg);
}
}, error: function (e) {
$("#b_submit").show();
$("#loading").addClass("hidden");
}
});
}
}
//将光标定位到用户名输入框
window.onload = function () {
document.getElementById("t_name").focus();
}
</script>
C#后台(.aspx.cs文件)
protected void Page_Load(object sender, EventArgs e)
{
if (IsPost)
LoginUser();
}
private void LoginUser()
{
if (IsLocalRequest && !IsRepeatPost)
{
string loginname = GetFormString("t_name");
string loginpwd = GetFormString("t_pwd");
if (loginname == "")
ResponseText(Newtonsoft.Json.JsonConvert.SerializeObject(new { res = 0, msg = "请输入用户名!" }));
else if (loginpwd == "")
ResponseText(Newtonsoft.Json.JsonConvert.SerializeObject(new { res = 0, msg = "请输入密码!" }));
else
{
string str = Common.Utils.MD5(loginpwd.ToLower());
t_member model = MemberDal.m_MemberDal.GetModel(string.Format(" mb_name = '{0}' and mb_pwd='{1}'", loginname, Common.Utils.MD5(loginpwd.ToLower())));
if (model != null)
{
if (model.mb_islock == 1)
ResponseText(Newtonsoft.Json.JsonConvert.SerializeObject(new { res = 0, msg = "无法登录,该账户被锁定!" }));
else
{
model.mb_logintime = DateTime.Now.ToString();
model.mb_loginip = Request.UserHostAddress;
MemberDal.m_MemberDal.Update(model);
Response.Cookies[":member"].Value = Common.Serialize.SerializeObject(model);
Response.Cookies[":member"].Expires.AddDays(1);
ResponseText(Newtonsoft.Json.JsonConvert.SerializeObject(new { res = 1, msg = "登录验证通过", data = "/Master.aspx" }));
}
}
else {
ResponseText(Newtonsoft.Json.JsonConvert.SerializeObject(new { res = 0, msg = "账号或密码不正确!" }));
}
}
}
}
jQury+Ajax与C#后台交换数据的更多相关文章
- 8.ajax与django后台json数据的交互
1新建django项目名为json_ajax,应用名为app,在templates模板中新建ajax.html文件 ajax.html <!DOCTYPE html> <html l ...
- ashx 获取ajax Post到后台json数据
前台页面代码: var json = [{ "Name": "Pavan Kumar Pabothu", "Age": 27, " ...
- jsp与后台交换数据(安全目录外)
function changebasin(rivername,codepollute){ $.ajax({ type: "POST", url: "${ctx}/wate ...
- ajax中的后台返回数据data的意义
- node学习笔记(二)(ajax方式向node后台提交数据)
通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...
- 【spring 后台跳转前台】使用ajax访问的后台,后台正常执行,返回数据,但是不能进入前台的ajax回调函数中
问题: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
- jquery ajax提交json格式的数据,后台接收并显示各个属性
我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span ...
- 通过ajax和spring 后台传输json数据
在通过ajax从页面向后台传数据的时候,总是返回415(Unsupported media type)错误,后台无法获取数据.如下图所示: 在尝试解决这个问题的时候,我们首先要理解一下概念: @req ...
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据: 图示: 实例:前台的代码 <%--表格显示区--%&g ...
随机推荐
- C Yuhao and a Parenthesis
Yuhao and a Parenthesis time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- 使用JS增加标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript —— 关于for in 与 for of 的区别
for in是ES5标准,遍历key,遍历的是数组的索引(即键名): for of是ES6标准,遍历value,遍历的是数组元素值: Object.prototype.objCustom = func ...
- [SDOI2015]寻宝游戏(LCA,set)
[SDOI2015]寻宝游戏 题目描述 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬间转移到 ...
- centos7 内网可达,外网不可达
参考:https://www.cnblogs.com/operationhome/p/10207257.html 网关地址改为192.168.1.1
- Centos7 tomcat 启动权限
Cannot find bin/catalina.sh The file is absent or does not have execute permission This file is ne ...
- 八个JS中你见过的类型。
1.布尔类型 布尔值只能为 true 或者 false ,其他的会报错 let bool: boolean = false; bool = true; // bool = 123; // error ...
- html+css+javascript学习记录1
<p> 最近在学一部分前端,知识点很多,却没怎么系统地应用过,因而理解可能不够深吧.所以我想做点片段似的东西,不懂的再在网上搜一搜,这样可能会更有意思点,所以做了这个记录,希望自己坚持下去 ...
- mongodb 用户 权限 设置 详解
原文地址:http://blog.51yip.com/nosql/1575.html 我知道的关系型数据库都是有权限控制的,什么用户能访问什么库,什么表,什么用户可以插入,更新,而有的用户只有读取权限 ...
- windows cmd bat处理文件
bat中输入: @echo offtitle 正在承载无线网络....netsh wlan start hostednetworknetsh wlan show hostednetworkecho 启 ...