如何通过javascript从html页面调用RESTful Web服务的函数

Question

我有一个安息的Web服务(Java(，我想通过提交按钮将get请求发送到Web服务。

Web服务中称为"测试"的函数将从HTML页面中的文本输入中获取字符串，返回字符串，然后我需要服用字符串并将其放入段落标签中，而无需刷新页面

这是我的代码：

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";
    }
}

任何人可以帮我吗？

Answer 1

您要寻找的是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是什么的更多信息：Ajax如何工作？