简体   繁体   English

从REST获取数据并重定向到另一个页面

[英]Get the data from REST and redirect to another page

I am learning HTML and javascript. 我正在学习HTML和javascript。 I am stuck at one place. 我被困在一个地方。 My requirement is to make a call to REST API and get the value and then redirect the page to another URL. 我的要求是调用REST API并获取值,然后将页面重定向到另一个URL。

Code Snippet: 代码段:

HTML 的HTML

<!DOCTYPE html>
<html>
<body>

    //REST SERVICE CALL
    <form action="http://localhost:51349/SMS_Rest.svc/v1/CheckBox"  method="get" > 
        <input type="checkbox" id = "1" name="graphId" value="1"> Graph1<br>
        <input type="checkbox" id = "2" name="graphId" value="2"> Graph2<br>
        <input type="checkbox" id = "3" name="graphId" value="3"> Graph3<br>
        <input type="checkbox" id = "4" name="graphId" value="4"> Graph4<br>
        <input type="submit">
    </form>

</body>
</html>

When I hit Submit I get the response from REST Service as TRUE. 当我点击Submit时,我从REST服务获得的响应为TRUE。 But the URL I get redirected to automatically matches with the REST URL mentioned in the action field of HTML. 但是,重定向到的URL自动与HTML的action字段中提到的REST URL匹配。 But I want to fetch data from REST and then redirect user to another page. 但是我想从REST获取数据,然后将用户重定向到另一个页面。 Am I making sense here. 我在这里有意义吗? Kindly help me. 请帮助我。

From what you used in your question you are using a form to make a REST call? 从您在问题中使用的内容,您正在使用表单进行REST调用? This is not the usual way to make REST call. 这不是进行REST调用的常用方法。 But if you insist on doing this, you need to change the response of your REST service to respond with a redirect such as : 但是,如果您坚持要这样做,则需要更改REST服务的响应以使用以下重定向进行响应:

HTTP/1.1 301 Moved Permanently
Location: http://www.example.org/otherpage

The other way do to this would be to post your form on a non REST endpoint which would do your form validation for example. 这样做的另一种方法是将您的表单发布到非REST端点上,这将对您的表单进行验证。 If you need to call your REST service before to do some other client side validation you should use window.XMLHttpRequest to process the REST call asynchronously before you submit the form ( onsubmit event). 如果需要在执行其他客户端验证之前调用REST服务,则应使用window.XMLHttpRequest在提交表单( onsubmit事件)之前异步处理REST调用。 There are more details here on how to achive this: http://rest.elkstein.org/2008/02/using-rest-in-javascript.html 这里有更多有关如何实现此目的的详细信息: http ://rest.elkstein.org/2008/02/using-rest-in-javascript.html

But maybe you just need to post your form normally, depending on your use case. 但是也许您只需要根据用例正常发布表单即可。 But submitting a form to a REST service is probably not the standard approach you want to use. 但是向REST服务提交表单可能不是您要使用的标准方法。

The best solution I can think of would be to submit the form with AJAX then redirect to the URL that you want to: 我能想到的最好的解决方案是使用AJAX提交表单,然后重定向到您想要的URL:

First you'll need jQuery Form plugin - Ajax Form Plugin Then after adding id="rest-form" to your form: 首先,您将需要jQuery Form插件-Ajax Form插件,然后将id =“ rest-form”添加到表单中:

jQuery("#rest-form").submit(function(e){
    //The following stops the form from redirecting
    e.preventDefault();
    jQuery("#rest-form").ajaxSubmit({
        type: 'GET',
        url: jQuery('#rest-form').attr('action'),
        data: jQuery('#rest-form').serialize(),
        success: function (data) {
            //The data variable will contain the response data
            //if it's successful, you can no redirect wherever you want
            window.location.href = "http://www.example.com";
        }
    });
});

It is the submit who trigger the redirect. 是提交触发重定向。 I suggest you to use an AJAX call, something like this : 我建议您使用AJAX调用,如下所示:

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://localhost:51349/SMS_Rest.svc/v1/CheckBox?graphId=" + graphId, true);
xhttp.send();
var response = xhttp.responseText;

Get the response of the request, and if correct redirect like this : 获取请求的响应,如果正确的重定向是这样的:

document.location.href="redirectionTarget";

EDIT : Native javascript is a bit crappy, you may want to use library like jquery instead, as mentionned by Leeish. 编辑:本机javascript有点cr脚,正如Leeish所提到的,您可能想使用类似jquery的库。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM