サーブレットを使用してAjax投稿に返信する方法

Question

私はユーザが名前を入力してサーバに送信し、サーバに送信するユーザ名のテキストボックスを持っています。 somedataを返信して、ユーザー名が取られていることをクライアントに伝えるために、テキストボックスの境界線の色を緑色に変える必要がある場合は、今度はサーバーにユーザー名の値を送信できますが、 jquery ajaxを使用して送信されたデータを受け取る方法。ここ

私のコードです：

クライアント：

$(document).ready(function() { 
$('#Registeration_Username_box').on('input', function() { 
    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: '../dusernameavailable', // 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) { 
     console.log(data); 
    }); 
} 
}); 

はサーブレット：で

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
PrintWriter out = response.getWriter(); 
String str = request.getReader().lines().collect(Collectors.joining(System.lineSeparator())); 
System.out.println(str); 
} 

Answer 1

あなたのアヤックスにsuccessとerrorを追加

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: '../dusernameavailable', // 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, 
    success: function(data) { 
    //TODO make the box green or whatever your requirement is 
    }, 
    error: function() { 
    //TODO username already taken 
    } 
}); 
} 
}); 

サーブレットは適切な応答を送信します。 サーバーからのエラーと見なすには、ajaxに対して200以外の応答コードを送信する必要があります。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    String str = request.getReader().lines().collect(Collectors.joining(System.lineSeparator())); 
    System.out.println(str); 
    //TODO - check if user name exists or not 
    if(user name already exists){ 
     response.setProperty(response.HTTP_STATUS_CODE, "500"); 
     PrintWriter out = response.getWriter(); 
     out.println("error"); 
     out.close(); 
    } 
    else{ 
     PrintWriter out = response.getWriter(); 
     out.println("success"); 
     out.close(); 
    } 

}}

Answer 2

は、あなたのAJAX呼び出しに成功ハンドラを追加します。

次のようなものを試すことができます。 'green'と 'red'はCSSファイルで定義したCSSクラスです。

$.ajax({ 
      type: 'POST', // define the type of HTTP verb we want to use (POST for our form) 
      url: '../dusernameavailable', // 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, 
      success: function(response) { 
       if(response.isUserNameAvailable == true) 
        $('input[name=UserName]').addClass('green'); 
       else 
        $('input[name=UserName]').addClass('red'); 
      } 
     }).done(function(data) { 
      console.log(data); 
     });