2016-05-28 6 views
0

Webサービスとhtmlページがあり、2つの値を計算して3番目のテキストフィールドに表示したいが、このコードは次のページに表示されます。いずれにせよ、私のFYPのために助けてくれます。HTMLの背景でWebサービスを使用

私のindex.html

<!DOCTYPE html> 

<html> 
<head> 
    <title>TO supply a title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 

<body> 
<h1>JAX-RS</h1> 

<form action="http://localhost:8080/ConnectingToNode/webapi/myresource?ID"         method="post" target="_self"> 
    <p> 
     Number1 : <input type="text" name="number1" /> 
    </p> 
    <p> 
     Number2 : <input type="text" name="number2" /> 
    </p> 
    <p> 
     Number3 : <input type="text" name="number3" /> 
    </p> 


    <input type="submit" value="Add" /> 
      <p> 
     Total : <input type="text" name="number3" /> 
    </p> 
</form> 
</body> 
</html> 

マイウェブサービス

@Path("myresource") 
public class MyResource{ 
HashMap<String, String> map= new HashMap<String, String>(); 

@POST 
@Produces(MediaType.TEXT_PLAIN) 
public Response addNumber(
     @FormParam("number1") int number1, 
     @FormParam("number2") int number2 
     ) { 
    int total=number1+number2; 
    return Response.status(200).entity("Total : " + total).build();   

} 
} 

答えて

0

かわりに、フォームを提出するのAJAX呼び出しを実行します。つまり、javascript関数を作成するだけです。 jQueryのを使用して:

function(data){ 
console.log("Data",data); // do what you want with response data 
} 

オフコースあなたは、フォームのボタンに$ .post機能をバインドする必要があります。コールバックは、このような機能がある

$.post("<your servlet here>", $("#y<ourFormIdHere>").serialize(),callback); 

を。