1. 程式人生 > >Form表單只提交數據,頁面不跳轉,返回表單值

Form表單只提交數據,頁面不跳轉,返回表單值

bre ava case java ssr ace 引用 except erl

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

返回剛剛輸入的用戶名與密碼

Form表單只提交數據,頁面不跳轉,返回表單值