2016-08-21 11 views
0

基本的に私はユーザー名のテキストボックスと送信ボタンがあるフォームを持っています。今私が望むのは、ユーザーがテキストボックスにテキストを入力するときに、テキストボックス値を取得してサーバーにユーザー名を送信して、ユーザー名が他のユーザーによって使用されているかどうかをサーバーが確認できるようにすることです。私はサーバーにテキスト値を送信することができますが、いくつかのデータを受け取ってテキストボックスの枠線を赤に変える方法がわからず、ユーザー名が取得されていればエラーが出ます。ここで 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> 

ユーザが撮影された場合に示される。

+0

? (PHP/ASP ??) – Scott

+0

はい私はそれを行うJava ee – kamran

+0

ようこそスタックオーバーフロー!あなたが書式設定してスクロールしないように手伝ってください。これは、関連性のないコードを削除することで簡単に行うことができます。 [最小、完全、および検証可能な例](http://stackoverflow.com/help/mcve)をお読みください。あなたのコードが何も特別な問題であなたの正確な問題を示すとき、あなたはボランティアしてあなたを助ける人たちに敬意を表しています。 – zhon

答えて

0

まあ、最初のオフ:

あなたがJSONするデータ型を必要としています。これはサーバー側(つまりPHPですか?)では、まずそれをJSONオブジェクトに変換する必要があります。さて、あなたはそれを返すことを確認する必要があり(source

int spacesToIndentEachLevel = 2; 
new JSONObject(jsonString).toString(spacesToIndentEachLevel); 

(JavaEEのとAndroidに組み込まれ)org.json.JSONObjectを使用する:PHPでこれは、Java EEのためにあなたは、これは使用することができ

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

だろう必要なのは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 
       });; 
    } 
+0

私はjava eeを使用しています – kamran

+0

ああ、申し訳ありませんが、私はjava eeの知識がありません。しかし、jquery側では、これはそれでなければなりません。あなたはここでのように、stackoverflowのjava eeからjson文字列を作成する方法の詳細を見つけることができます:http://stackoverflow.com/questions/6185337/how-do-i-pretty-print-existing-json-data-with -java – NoobishPro

+0

@kamran?それは動作しましたか? – NoobishPro

関連する問題