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 ...
随机推荐
- Flask 中请求钩子的理解和应用?
请求钩子是通过装饰器的形式实现的,支持以下四种:1,before_first_request 在处理第一个请求前运行2,before_request:在每次请求前运行3,after_request:如 ...
- hasattr() getattr() setattr() 函数使用详解??
hasattr(object, name)函数: 判断一个对象里面是否有name属性或者name方法,返回bool值,有name属性(方法)返回True,否则返回False. **注意:name要使用 ...
- JavaScript基础1——在末尾添加节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ES6——generator
generator 生成器函数 普通函数,一路到底 generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权 yield 有 放弃.退让.退位的意思 需要调用next()方法启动 ...
- 前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...
- Java JNA (五)—— 释放Memory对象分配的内存
Java进程的内存包括Java NonHeap空间.Java Heap空间和Native Heap空间. JNA中的Memory对象是从Native Heap中分配空间.但java的GC是针对Java ...
- neovim初次安装使用
github下载neovim代码 按readme中安装,中间可能 要安装一些库 将vim的配置关联到nvim,发现和vim是一样的 ln -s ~/.vim ~/.config/nvim ln -s ...
- C++基础之static(静态)变量
static 表示静态 作用: 1.在函数体内,静态变量的值维持不变(记忆功能) 2.是一个本地的全局函数,即只能被本模块的函数访问(隐藏功能) static变量: static全局变量和普通 ...
- Linux--shell交互输入与循环语句--06
一.交互输入 1.命令用法:read a b c -> aa bb cc read命令同时可以定义多个变量值:而输入的内容默认以空格为分隔符,将值输入到对应的变量中:如果默认值输入过多,最后 ...
- TensorFlow 安装及使用
安装 (1)安装包安装:pip install tensorflow==1.14 -i https://pypi.douban.com/simple virtualenv -p /usr/bin/py ...