如何通過javascript從HTML頁面調用REST風格的Web服務功能

我有一個REST風格的Web服務（Java），並且我想通過提交按鈕向Web服務發送獲取請求。如何通過javascript從HTML頁面調用REST風格的Web服務功能

在所謂的「測試」將從HTML頁面中的文本輸入一個字符串和返回一個字符串，然後我需要的字符串，並把它放在一個段落標記Web服務的功能無需刷新頁面

這裏是我的代碼：

HTML頁面：

<input type="text" id="equation_input"> 

<input type="button" value="Calculate" id="equation_submit" onclick="fun()"> 

<p id="value"></p>

RESTful Web服務：

import javax.ws.rs.Consumes; 
import javax.ws.rs.GET; 
import javax.ws.rs.POST; 
import javax.ws.rs.Path; 
import javax.ws.rs.PathParam; 
import javax.ws.rs.Produces; 
import javax.ws.rs.QueryParam; 
import javax.ws.rs.core.MediaType; 
import org.tarek.doctorMath.resources.test.*; 

@Path("/first") 
public class first_equation { 

@GET 
@Path("/{test}") 
@Produces(MediaType.TEXT_PLAIN) 
public String test(@PathParam("test") String equation) { 
     return "test"; 
    } 
}

任何人都可以幫助我嗎？

來源

2017-05-05 Tarek Mrad

fun（）中會發生什麼？向我們展示代碼.. – juliobetta

請參閱：http://stackoverflow.com/questions/247483/http-get-request-in-javascript – sheunis

你所尋找被稱爲AJAX（異步JavaScript和XML）

有噸庫，這使得AJAX容易的，但對於這麼簡單的東西，這裏是一個簡單的純JS例如

//url: the url to call through ajax 
//callback: a function to execute when it is done 
//error: a function for if there was a problem with the request 
function load(url, callback, error){ 
    var xhr; 

    // here we check what version of AJAX the browser supports 
    if(typeof XMLHttpRequest !== 'undefined') 
     xhr = new XMLHttpRequest(); 
    else { 
     //internet explorer is stupid... 
     var versions = ["MSXML2.XmlHttp.5.0", 
         "MSXML2.XmlHttp.4.0", 
         "MSXML2.XmlHttp.3.0", 
         "MSXML2.XmlHttp.2.0", 
         "Microsoft.XmlHttp"] 

     for(var i = 0, len = versions.length; i < len; i++) { 
      try { 
       xhr = new ActiveXObject(versions[i]); 
       break; 
      } 
      catch(e){} 
     } // end for 
    } 


    function ensureReadiness() { 
     //not done yet 
     if(xhr.readyState < 4) { 
      return; 
     } 

     // all is well 
     if(xhr.readyState === 4 && xhr.status === 200) { 
      callback(xhr.responseText); 
     } else { 
      error(xhr); 
     }  
    } 
    //here we assign the function above to check if the AJAX call is finished 
    xhr.onreadystatechange = ensureReadiness; 

    //send the request 
    xhr.open('GET', url, true); 
    xhr.send(''); 
} 

//we call the function like this: 
load('http://example.com/page', 
    function(successText){ 
     //get the paragraph and assign the value 
     var p = document.getElementById('value'); 
     p.innerHTML = successText; 
    }, 
    function(error){ 
     console.log(error); 
})

查看此主題了解AJAX的更多信息：How does AJAX work?

來源

2017-05-05 18:25:20 TheRealMrCrowley

如何通過javascript從HTML頁面調用REST風格的Web服務功能

回答

相關問題