使用输入 onBlur 触发跨域 YQL ajax 请求答案

【问题标题】：Trigger cross domain YQL ajax request with input onBlur使用输入 onBlur 触发跨域 YQL ajax 请求
【发布时间】：2014-03-05 17:43:08
【问题描述】：

我有一个表格来收集有关产品的信息（即来自亚马逊）。我试图在 URL 输入模糊时触发 YQL ajax 请求。目前，控制台中没有错误，但也没有结果。这是我的表单输入：

<div class="uk-form-row">
            <div class="uk-form-label"><?php echo $this->form->getLabel('item_url'); ?></div>
            <div class="uk-form-controls "><input type="text" name="jform[item_url]"   id="jform[item_url]" value="<?php if (!empty($this->item->id)) { echo $this->item->item_url;}; ?>" class="uk-form-large uk-width-medium-1-1" placeholder="http://" aria-required="required" required="required"/></div>
          </div> 
              <script type="text/javascript"> 
    jQuery( "#jform[item_url]" ).blur(function() {
              var path = jQuery('#jform[item_url]').val();
          requestCrossDomain(path, function(results) {
   jQuery('#url_results').html(results);
    });
    });
    </script>

    <div id="url_results">
          </div>

我的功能：

    // Accepts a url and a callback function to run.
function requestCrossDomain( site, callback ) {

    // If no url was passed, exit.
    if ( !site ) {
        alert('No site was passed.');
        return false;
    }

    // Take the provided url, and add it to a YQL query. Make sure you encode it!
    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=cbFunc';

    // Request that YSQL string, and run a callback function.
    // Pass a defined function to prevent cache-busting.
    jQuery.getJSON( yql, cbFunc );

    function cbFunc(data) {
    // If we have something to work with...
    if ( data.results[0] ) {
        // Strip out all script tags, for security reasons.
        // BE VERY CAREFUL. This helps, but we should do more. 
        data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');

        // If the user passed a callback, and it
        // is a function, call it, and send through the data var.
        if ( typeof callback === 'function') {
            callback(data);
        }
    }
    // Else, Maybe we requested a site that doesn't exist, and nothing returned.
    else throw new Error('Nothing returned from getJSON.');
    }
}

这是小提琴：http://jsfiddle.net/FLY66/2/

【问题讨论】：

看起来不对jQuery( "#jform[item_url]" ) 应该是：jQuery("#jform\\[item_url\\]" )
我在小提琴中试过了。还是不行
请注意，使用 getJSON，您正在等待从服务器返回的 JSON 数据，但您要求 XML，请改用 $.get()。参见例如：jsfiddle.net/FLY66/9 检查您的控制台，数据是从服务器返回的。或获取 JSON：jsfiddle.net/FLY66/10
谢谢 - 知道为什么没有结果出现吗？理想情况下，我希望只显示 h1 标记，以及结果中的一些其他元素
我不确定你在这里要做什么，但使用 JSON 你应该使用 data.query.results 但最好不要检查自己返回服务器的内容，使用你的控制台

标签： javascript jquery ajax yql

【解决方案1】：

此问题与您的服务器更相关。您可以简单地在您的服务器上设置Access-Control-Allow-Origin 标头。寻找你的服务器语言看看如何设置Access-Control-Allow-Origin

将其设置为 * 将接受来自任何域的跨域 AJAX 请求。另一种选择是对返回的数据使用“JSONP”数据类型。

参考文献

http://en.wikipedia.org/wiki/Same_origin_policy

https://developer.mozilla.org/en/http_access_control

【讨论】：