基本上我有一个带有用户名文本框和提交按钮的表单。现在我想要的是，当用户在文本框中输入文本时，它应该获取文本框值并将用户名发送到服务器，以便服务器可以检查用户名是否被其他用户使用。我可以将文本值发送到服务器，但我不知道如何接收回一些数据并将文本框边框变成红色，如果用户名已被占用则弹出错误消息。
这是我获取文本值并将其发送到服务器的代码:
<!DOCTYPE html>
<html>
<head>
<script src="../JquerySock.js"></script>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function() {
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
});
function postUsernameToServer() {
var formData = {
'username': $('input[name=UserName]').val(),
};
// process the form
$.ajax({
type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
url: '../postr', // the url where we want to POST
data: formData, // our data object
dataType: 'json', // what type of data do we expect back from the server
encode: true
})
}
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<div class="createnewaccount" id="createnewaccount">Create new account</div>
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<span class="Usernameerror_spn" id="Usernameerror_spn">Username has been taken</span>
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box"
placeholder="Username" name="UserName" maxlength="30" />
</div>
</form>
</div>
</body>
</html>
如您所见，我的用户名文本框之前有一个跨度框，默认情况下它是隐藏的，但我希望在用户被占用时显示它。
最佳答案
好吧，首先:
您要求数据类型为 JSON。这意味着在服务器端(是 PHP 吗？)您必须先将其转换为 JSON 对象。在 PHP 中，这将是
$data = array("username" => "bla", "taken" => "taken");
echo json_encode($data);
对于 Java EE，您可以使用这个:( source )
int spacesToIndentEachLevel = 2;
new JSONObject(jsonString).toString(spacesToIndentEachLevel);
使用 org.json.JSONObject(内置于 JavaEE 和 Android)
现在，您必须确保它仅返回所需的 JSON 而没有其他任何内容，否则您会收到错误。
然后，在您的 ajax 调用中获得反馈:
function postUsernameToServer() {
var formData = {'username': $('input[name=UserName]').val()};
// process the form
$.ajax({
type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
url: '../postr', // the url where we want to POST
data: formData, // our data object
dataType: 'json', // what type of data do we expect back from the server
encode: true
}).done(function(data){ //any name you put in as an argument here will be the json response string.
var username = data.username;
var taken = data.taken;
//check if username is taken
if(taken == "taken"){
//make input border red
$('.yourInput').css({"border-color": "red"});
}
else{
//make input border green
$('.yourInput').css({"border-color": "green"});
}
}).error(function(errorData){
//Something went wrong with the ajax call. It'll be dealt with here
});;
}
关于javascript - 如何使用ajax从服务器接收回数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39068662/