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