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

Posted 2021-01-05 zzzkun

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;
}
}

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