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

【问题标题】：How to receive data back from server using ajax?如何使用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。当您的代码不加赘述地显示您的确切问题时，您就是在尊重那些自愿帮助您的人。

标签： javascript jquery html ajax

【解决方案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 方面，应该是这样。您可以在 stackoverflow 上找到有关如何从 java ee 创建 json 字符串的更多信息，例如：stackoverflow.com/questions/6185337/…
我见过的最好的答案之一