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

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

这里是我获取文本值，并将其发送给服务器代码：

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

正如你可以看到我有它默认是隐藏我的用户名文本框前的跨度箱，但我希望它是如果用户已被占用，则显示。

来源

2016-08-21 kamran

你有服务器端脚本？（PHP/ASP ??） – Scott

是的，我做的是java ee – kamran

欢迎来到堆栈溢出！你可以帮助我们通过格式化来帮助你，所以我们没有滚动它。这很容易通过删除不相关的代码来完成。请阅读[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。当你的代码没有任何额外的东西显示你的确切问题时，你会向志愿帮助你的人表示敬意。 – zhon

嗯，首先：

你需要数据类型为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 
       });; 
    }

来源

2016-08-21 20:48:57 NoobishPro

我正在使用java ee – kamran

哦，对不起，我没有java ee的知识。然而，在jQuery方面，这应该是它。你可以找到更多的信息，如何创建一个json字符串从java ee在stackoverflow，就像这里：http://stackoverflow.com/questions/6185337/how-do-i-pretty-print-existing-json-data-with -java – NoobishPro

@kamran好吗？它有用吗？ – NoobishPro

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

回答

相关问题