jQuery：從PHP文件中單擊按鈕時刷新div內容

Question

小提琴： http ： //jsfiddle.net/feqnLs6o/

我正在嘗試使用jQuery在button1單擊上刷新<div id="refreshableDiv"> 。 我想每次單擊button1時將http://shiro-desu.com/scr/test/test.php的內容加載到<div> 。 因為我以前沒有使用過jQuery，所以我不明白為什么以下內容不會重新加載div的內容。

腳本代碼：

$(document).ready(function(){
 $('#button1').click(function(){
        $.post(
        "http://shiro-desu.com/scr/test/test.php",
        {
        },
        function(data){
        $('#refreshableDiv').html(data);
        });
    });
});

test.php

<?php echo "543"; ?>

html代碼：

<div id="refreshableDiv">Primary content</div>
<input type="submit" class="button1" name="button1" value="Reload"/>

有任何想法嗎？

http://jsfiddle.net/feqnLs6o/

Answer 1

只需將按鈕的html代碼更改為：

<input type="submit" id="button1" name="button1" value="Reload"/>

綁定點擊事件時，您正在使用ID。

Answer 2

看來您沒有發布任何數據-改為執行AJAX GET請求更為合理。

$(document).ready(function(){
 $('.button1').click(function(){
     $.ajax({
         url:'http://shiro-desu.com/scr/test/test.php'
     }).done(function(response) {
        $('#refreshableDiv').html(response); 
     });
 });
});

檢查控制台日志中的請求顯示以下錯誤：

XMLHttpRequest無法加載http://shiro-desu.com/scr/test/test.php 。 所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問源“ http://fiddle.jshell.net ”。 fiddle.jshell.net/_display/:1

推桿：

<?php header('Access-Control-Allow-Origin: *'); ?>

在http://shiro-desu.com/scr/test/test.php的頂部應該可以解決該問題。

這是關於http://en.wikipedia.org/wiki/Same-origin_policy