Question

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

我正在尝试使用jQuery在<div id="refreshableDiv">点击时刷新button1。我想在每次点击http://shiro-desu.com/scr/test/test.php时将<div>的内容加载到button1。由于我之前没有使用过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

jQuery：从php文件中点击按钮时刷新div内容

2 个答案: