Question

我对如何恰当地标题这个问题并不太确定。

我想讨论以及时方式与其他网站发布/获取数据的最佳方法，并使用jQuery作为主力。当然，我愿意接受更好的方法和库的建议，尽管是基于Javascript或C＃。

让我尝试设置方案。

这两个网站共享子域＆＃39; a.company＆＃39;但它们是两个独立的IIS7站点。

网站1

a.company.com/products
ASP MVC 5
包含＆＃39; puesdo＆＃39;用于收集想要传递给site2的产品的购物车方法。

网站2

a.company.com/checkout
供应商预编译无法访问CS文件，但可以修改aspx / masterfile文档
ASP Webforms
API有限，会将网址转换为产品并添加到购物车中。
示例a.company.com/checkout/product/qty

目前，当按钮“继续结帐”时单击站点1 ，jQuery函数循环遍历每个购物车项目并生成类似于以下内容的URL： a.company.com/checkout/product/qty 然后加载URL到文档的iframe。这个循环也有一个setTimeout函数，

jQuery(function(){

  $('#proceed').on('click', function(){
       // set integer for timeout

       n = 2;

       $(cartobject).each(function(i){

              q = item.get('qty');
              p = item.get('productid');

              // delay loop
              setTimeout(function(){ 
                   ProceedItems(q,p) 
              }, 1000 * (i + 1));
              n = n + parseInt(i);
       });

       n = n * 2 + "000"; // from each function
       // delay redirect so loop can finish
       setTimeout(function(){
            RedirectCustomerToCheckout();
       }, n );


  });

  // Proceed each item to Checkout API
  function ProceedItems(quantity, productid)
  {
      $("#iframe").attr("src","http://a.company.com/checkout/" + productid + "/" + quantity);
  }

  // when loop as finished :: take customer to checkout process.
  function RedirectCustomerToCheckout()
  {
       window.location.href = "http://a.company.com/checkout";
  } 

});

这种方法很有效，而且我很欣赏，如果它没有破坏整个过程。 - 但我的焦虑一直在边缘，因为我认为必须有更好的方法。也许添加检查iframe已完成加载/回发的代码？

主要关注点是： - iframe没有加载（并且没有生成任何反馈） - 页面重定向用户没有完成循环（因为连接速度慢）？

使用带有回复成功/失败/完成检查的Ajax POST / GET功能在确保加载完成方面更加安全。

真的很喜欢一些建议。

Remote Address:10.0.0.100:800
Request URL:http://a.company.com/checkout/46026/1
Request Method:GET
Status Code:302 Found

GET /checkout/46026/1 HTTP/1.1
Host: a.company.com
Connection: keep-alive
Accept: */*
Origin: http://a.company.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Referer: http://a.company.com
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Answer 1

我会假设您网站上的iframe被隐藏，用户实际上并没有看到它。
我会绝对使用ajax，而不是使用iframe。

此示例将并行执行所有请求（在Chrome中一次最多6个），然后如果成功完成，则会调用RedirectCustomerToCheckout，否则会调用onFailedCheckout请求失败或通过默认的ajax超时。

如果您想要按请求超时使用，则可以使用$.ajax代替$.get。

jQuery(function () {
    $('#proceed').on('click', function () {
        var checkouts = [];
        $(cartobject).each(function (item) {
            var q = item.get('qty');
            var p = item.get('productid');
            checkouts.push($.get('http://a.company.com/checkout/' + p + '/' + q));
        });
        // $.when will wait for all checkouts to complete
        $.when.apply($, checkouts)
           .done(RedirectCustomerToCheckout)
           .fail(function onFailedCheckout() {
                alert('stuff broke !');
           });
    });

    // when loop as finished :: take customer to checkout process.
    function RedirectCustomerToCheckout() {
        window.location.href = 'http://a.company.com/checkout';
    }
});

Answer 2

由于两者共享同一个域，您可以尝试这样的事情。

我在这里使用带回调的jQuery .load。

而不是在.each中调用iframe加载。我使用了'Q'数据结构。

// our cartQ
var cartQ = new Array();


jQuery(function () {

    $('#proceed').on('click', function () {
        // re init the Q
        cartQ = new Array();
        // add each cartobject to Q
        $(cartobject).each(function (i) {
            cartQ.unshift(this);
        });

        // begin loading iframe.
        loadFromQ();
    });


    function loadFromQ() {
        if (cartQ.length !== 0) {
            var item = cartQ.pop();
            q = item.get('qty');
            p = item.get('productid');

            // pass same function as callback
            ProceedItems(q, p, loadFromQ);

        } else {
            RedirectCustomerToCheckout();
        }

    }
    // Proceed each item to Checkout API
    function ProceedItems(quantity, productid, callback) {
        $(document.body).append("<IFRAME id=p" + productid + " ...>");
        $('iframe#p' + productid).attr("http://a.company.com/checkout/" + productid + "/" + quantity, url);

        // call callback after loaded.
        $('iframe#p' + productid).load(function () {
            callback(this);
        });

    }

    // when loop as finished :: take customer to checkout process.
    function RedirectCustomerToCheckout() {
        window.location.href = "http://a.company.com/checkout";
    }

});

希望这有帮助！

Answer 3

从我可以收集到的信息来看，我认为您主要在第一个网站上进行演示，并从另一个网站进行结账。在我看来，您应该使用jquery将产品模板添加到用户产品，同时向产品结帐URL发送jquery get（ajax）请求。所有对产品结帐的调用都会将产品添加到同一个购物车中，最后结帐会将用户重定向到用户购物车结帐页面。我不推荐使用iframe，除非你有一个非常具体的理由这样做。

Answer 4

如果您所做的一切都是在网址上执行获取请求，那么为什么不只是将图片附加到包含网址的图片和查询字符串作为img src

<img src="http://...your endpoint url?querystring..." class="hidden" >

您可以使用img onload事件来确认服务器发送了响应，这将为您提供使用在onload事件上重新调用的异步循环以及发送所有项目时重定向用户的功能结帐。

或者您可以将多少图像作为购物车中的项目附加到页面上，在所有图像上加载onload事件以及所有加载重定向时。

使用超时循环将数据加载到iframe的更好选项

4 个答案: