[英]Posting Data from textBox in HTML to Restful Service using jQuery AJAX
我试图通过jQuery和Ajax将数据从textBoxes的输入值发布到Restful服务。 但即时通讯无法做到。
这是我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="LoginHtml.js">
</script>
</head>
<body>
<div id="registration">
<h2>Login Account</h2>
<form id="registerUserForm">
<fieldset>
<p>
<input id="txtUserName" type="text" required="required" autofocus="true" placeholder="User Name" />
</p>
<p>
<input id="txtPassword" type="password" required="required" placeholder="Password" />
</p>
<p>
<input type="button" id="submitForm" autofocus="true" /><br>
<input type="button" value="Login" onclick="Call()" ></input>
</p>
</fieldset>
</form>
</div>
</body>
</html>
这是我的JavaScript代码:
function Call() {
jQuery.support.cors = true;
var data = {};
data.uid = document.getElementById('txtUserName');
data.pwd = document.getElementById('txtPassword');
$.ajax({
data: jQuery.toJSON(data),
dataType: "json",
url: "http://:xxxxxx:8080/Service1/Login",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (result) {alert("success");
alert(result.d);}
error: function OnError(request, result, error) {
alert(result);
}
});
这是我的服务代码:
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public UserProfile Login(string uid, string pwd)
{
UserProfile oUser = null;
//UserDao userDao;
using (UserProfileDataContext db = new UserProfileDataContext())
{
var u = db.Users.FirstOrDefault(o => o.Username == uid && o.Password == pwd);
if (u != null)
{
oUser = new UserProfile();
oUser.Id = u.Id;
oUser.Username = u.Username;
oUser.Password = u.Password;
oUser.Email = u.Email;
}
}
return oUser;
}
告诉我我错了。
我认为您在代码中犯了一个错误。 您的写作服务是“发布”,而您使用“ GET”来调用它。 所以请改变这个。
[WebGet(BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
尝试序列化表格:
var data = $("#registerUserForm").serialize();
并将类型更改为POST而不是GET
所以...
$.ajax({
data: data,
url: "http://:xxxxxx:8080/Service1/Login",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
alert("success");
alert(result.d);
}
error: function OnError(request, result, error) {
alert(result);
}
});
尝试在登录方法中返回以下内容
return Json(new { Id = oUser.Id, Username = oUser.Username });
然后在成功功能
success: function (result) {
alert("success");
alert(result.Id);
}
当然,在ajax调用中,类型必须是POST
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.