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中的答案＆＃34;小部件＆＃34;但如果我粘贴这个：

<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);
                }
            });
        });
    }
})(); 

希望它适合你。