如何使用ajax从服务器接收数据？
Posted
技术标签:
【中文标题】如何使用ajax从服务器接收数据？【英文标题】：How to receive data back from server using ajax? 【发布时间】：2016-12-28 08:43:04 【问题描述】：基本上我有一个带有用户名文本框和提交按钮的表单。现在我想要的是，当用户在文本框中输入文本时，它应该获取文本框值并将用户名发送到服务器，以便服务器可以检查用户名是否被任何其他用户使用。我可以将文本值发送到服务器，但我不知道如何接收一些数据并将文本框边框变为红色，如果用户名已被使用，则会弹出错误。
这是我获取文本值并将其发送到服务器的代码：
<!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>
如您所见，我的用户名文本框之前有一个跨度框，默认情况下它是隐藏的，但如果用户已被占用，我希望它显示出来。
【问题讨论】：
你有服务器端脚本吗？ (php/ASP??) 是的，我这样做是 java ee 欢迎来到 Stack Overflow！您可以通过格式化来帮助我们帮助您，这样我们就不会滚动它。这可以通过删除不相关的代码轻松完成。请阅读Minimal, Complete, and Verifiable example。当您的代码不加赘述地显示您的确切问题时，您就是在尊重那些自愿帮助您的人。 【参考方案1】：好吧，首先：
您要求数据类型为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
);;
【讨论】：
我正在使用 java ee 哦，对不起，我对java ee一无所知。但是，在 jquery 方面，应该是这样。您可以在 *** 上找到有关如何从 java ee 创建 json 字符串的更多信息，例如：***.com/questions/6185337/… 我见过的最好的答案之一以上是关于如何使用ajax从服务器接收数据？的主要内容，如果未能解决你的问题，请参考以下文章