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

时间:2017-05-05 18:08:57

标签: javascript java html web-services rest

我有一个RESTful Web服务(java),我想通过提交按钮向Web服务发送一个get请求。

Web服务中调用&#34; test&#34;的函数。将从html页面中的文本输入中获取字符串返回一个字符串,然后我需要获取字符串并将其放在段落标记中而不刷新页面< / p>

这是我的代码:

html页面:

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

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

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

RESTful网络服务:

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

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

您正在寻找的是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?