JavaScript 答案

Question

(function() {
    main();
    function main() { 
        jQuery(document).ready(function($) { 
            $.ajax({
                type: 'post',
                url: 'http://example.com/search.php',
                data: { value: '123' },
                cache: false,
                success: function(returndata) {
                    $('#widget').html(returndata);
                }
            });
        });
    }
})(); 

<script src="http://example.com/widget.js" type="text/javascript"></script>
<div id="widget"></div>

当我将小部件粘贴到我的网站上时，它运行良好，并且我得到了 div“小部件”中的答案，但是如果我粘贴此:

<script src="http://example.com/widget.js" type="text/javascript"></script>
<div id="widget"></div>

对于另一个页面，它不起作用。有人可以帮忙吗？

Answer 1

截至您发表评论时，您遇到了跨域限制 ( Same-origin policy )。一个可行的解决方案是将“search.php”中的内容作为 jsonp 提供。

<?php

header('content-type: application/json; charset=utf-8');
$searchResults= array("Article 1", "Article 2", "Article 3");
echo $_GET['callback'] . '('.json_encode($searchResults).')';

?>

在 jQuery $.ajax 中，您应该将 dataType 设置为“jsonp”，也许还可以设置参数 crossDomain 也改为 true。

(function() {
    main();
    function main() { 
        jQuery(document).ready(function($) { 
            $.ajax({
                type: 'post',
                dataType: 'jsonp',
                crossDomain: true, // Shouldent be neccesary.
                url: 'http://example.com/search.php',
                data: { value: '123' },
                cache: false,
                success: function(returndata) {
                    $('#widget').html(returndata);
                }
            });
        });
    }
})(); 

希望它对你有用。