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 ...
随机推荐
- Java并发知识总结
jixu 8. 并发 启动线程的几种方式 Thread t7 = new Thread(timer); t7.start(); Thread.sleep(100) //暂停当前线程 class MT ...
- JavaScript基础9——操作DOM树
appendChild()方法:添加子节点到末尾 类似于剪切粘贴的效果 insertBefore(newNode, oldNode)方法:在某个节点之前插入一个节点 newNode为要插入的节点, ...
- jQuery学习总结01-选择器
下面简单介绍一个常用的jQuery使用方法,其他详细的猛戳这里 一.选择器 1.parent > child 说明:在给定父类的情况下匹配所有的子类 示例: 描述:匹配表单中所有的的子级inpu ...
- Dubbo学习源码总结系列四--集群容错机制
Dubbo提供了哪些集群容错机制?如何实现的? 提供了六种集群容错机制,包括Failover(失败自动切换,尝试其他服务器).Failfast(失败立即抛出异常).Failsafe(失 ...
- 2018-5-5-UWP-和-WPF-对比
title author date CreateTime categories UWP 和 WPF 对比 lindexi 2018-05-05 17:23:33 +0800 2018-04-16 20 ...
- 10-基于TMS320C6678+XC7K325T的6U CPCI Full Camera Link图像处理平台
基于TMS320C6678+XC7K325T的6U CPCI Full Camera Link图像处理平台 1.板卡概述 板卡由我公司自主研发,基于6UCPCI架构,处理板包含一片TI DSPTMS3 ...
- MYSQL学习笔记——常用语句
1.检索数据 1.1.检索单个列:SELECT prod_name FROM products; 1.2.检索多个列:SELECT prod_id, prod_name, prod_price FRO ...
- 转 Java中wait和sleep方法的区别
1.两者的区别 这两个方法来自不同的类分别是Thread和Object 最主要是sleep方法没有释放锁,而wait方法释放了锁,使得其他线程可以使用同步控制块或者方法(锁代码块和方法锁). wait ...
- Spring中都用到了哪些设计模式
JDK 中用到了那些设计模式?Spring 中用到了那些设计模式?这两个问题,在面试中比较常见.我在网上搜索了一下关于 Spring 中设计模式的讲解几乎都是千篇一律,而且大部分都年代久远.所以,花了 ...
- JS原型链详解(2)
深入理解javascript原型链 在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环.今天我分享一下 ...