Javascript 如何使用ajax从服务器接收数据？_Javascript_Jquery_Html_Ajax

Javascript 如何使用ajax从服务器接收数据？

javascript jquery html ajax

Javascript 如何使用ajax从服务器接收数据？,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,基本上我有一个带有用户名文本框和提交按钮的表单。现在我想要的是，当用户在textbox中输入文本时，它应该得到textbox值并将用户名发送到服务器，这样服务器就可以检查用户名是否被任何其他用户使用。我可以将文本值发送到服务器，但我不知道如何接收回一些数据，并将文本框边框变为红色，如果使用了用户名，则弹出一个错误以下是获取文本值并将其发送到服务器的代码： <!DOCTYPE html> <html> <head> <script src="../

基本上我有一个带有用户名文本框和提交按钮的表单。现在我想要的是，当用户在textbox中输入文本时，它应该得到textbox值并将用户名发送到服务器，这样服务器就可以检查用户名是否被任何其他用户使用。我可以将文本值发送到服务器，但我不知道如何接收回一些数据，并将文本框边框变为红色，如果使用了用户名，则弹出一个错误

以下是获取文本值并将其发送到服务器的代码：

<!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>


$（文档）.ready（函数（）{
$（“#注册_用户名_框”）。在（'input'，function（）上{
console.log（'executed input'）；
postaserNameToServer（）；
});
});
函数positionNameToServer（）{
var formData={
'username'：$（'input[name=username]'）。val（），
};
//处理表格
$.ajax({
type:'POST'，//定义要使用的HTTP谓词的类型（表单的POST）
url:“../postr”，//我们要发布的url
data:formData，//我们的数据对象
dataType:'json'，//我们希望从服务器返回什么类型的数据
编码：正确
})
}
创建新帐户
用户名已被使用

正如您所看到的，我的用户名文本框之前有一个span框，默认情况下是隐藏的，但如果用户已被录取，我希望显示该框。

首先：

您要求数据类型为

JSON

。这意味着在服务器端（是PHP吗？）必须首先将其转换为JSON对象。在PHP中，这将是

$data = array("username" => "bla", "taken" => "taken");
echo json_encode($data);

对于JavaEE，您可以使用以下内容：（）

使用

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

你有服务器端脚本吗？（PHP/ASP？？？）是的，我知道，这是java EE欢迎使用堆栈溢出！你可以通过格式化你的文件来帮助我们，这样我们就不用滚动了。这可以通过删除不相关的代码轻松完成。请阅读。当你的代码毫不费力地显示出你的问题时，你是在向那些自愿帮助你的人表示敬意。然而，在jquery方面，应该是这样。您可以找到关于如何在stackoverflow上从JavaEE创建json字符串的更多信息，如下所示：我所看到的最佳答案之一

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