Form表单只提交数据,页面不跳转,返回表单值

html代码:

<form method="post" action="Handler/UserHandler.ashx?action=Test" onsubmit="return RuturnLoginResult();" id="UserLoginFrom">
<div>
<p>
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" id="userName" name="userName" required/>
</p>
<p>
<label>密码:</label>
<input type="password" name="userPwd" id="userPwd" placeholder="请输入密码" required/>
</p>
<p>
<input type="submit" value="提交"/>
</p>
</div>
</form>

在form里面增加onsubmit返回事件,另外增加id="UserLoginFrom"

看一下jQuery的事件:

function RuturnLoginResult(){

  $('#UserLoginFrom').ajaxSubmit(function(message){

    alert(massage);//message是后台处理数据的返回值

     })

  return false;//这里必须要返回false,不然依然会跳转。

}

上面js要想执行成功首先要引用<script src="Scripts/jquery-form.js" type="text/javascript"></script>(jquery-form.js可以到网上下载)

没有这个js依然谈会跳转。

看一下Handler/UserHandler.ashx?action=Test这个方法的处理数据的返回值

public void ProcessRequest(HttpContext context)
{

context.Response.ContentType = "text/plain";
string action = context.Request["action"].ToLower().ToString();
switch(action)
{
case "test":
context.Response.Write(GetFormNames(context));
break;
}
}

private string GetFormNames(HttpContext context)
{
try
{
var UserLoginForm = context.Request.Form;
string UserName = UserLoginForm["userName"];
string UserPwd = UserLoginForm["userPwd"];
return UserName+":"+UserPwd;
}
catch (Exception ex)
{
throw;
}
}

返回刚刚输入的用户名与密码

posted @ 2016-01-07 21:22  管学文  阅读(9194)  评论(0编辑  收藏  举报