ajax 响应后未更新的值答案

【问题标题】：values not updated after an ajax responseajax 响应后未更新的值
【发布时间】：2013-07-05 22:55:04
【问题描述】：

我通过 ajax 将一些表单数据发送到同一页面中的 php 脚本。 PHP 必须处理数据并在同一页面中显示结果。

我正在为 ajax 使用这种语法：

$.ajax
({
    type: "POST",
    url: "",
    data: $("form").serialize(),
    success: function(result)
    {
        updatechart();
       console.log(result);
    }
});

我基本上是在尝试根据表单中输入的数据并在经过 php 脚本处理后更新图表中的一些值。当我执行console.log(result); 时，我得到了页面的整个源代码，并且在执行此操作后在我的控制台中更新了值，但图表没有更新。当我查看页面源时，值保持不变。我该怎么办？

    function updatechart() {
        var json=<?php echo json_encode($GLOBALS['json']); ?>;
        var direct=json['direct'];
        var total=json['total'];
        var referred=total-direct;
        var aid=new Array();
        var count=new Array();
        for(var i=0;i<json['aid'].length;i++) {
            aid[i]=json['aid'][i];
            count[i]=json['count'][i];
        }
    var series = [{
                name : "Referred",
                data: [referred]
            }, {
                name: "Direct",
                data: [direct]
            }];
       for(var i=0; i<aid.length;i++) {
            series.push({
                name: 'AID-'+[aid[i]],
                data: [count[i]]
            })
        }
    var options = {
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'User Source Chart'
        },
        xAxis: {
            categories: ['Users']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total users'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
            series: series
    };
    chart = new Highcharts.Chart(options); 
}

这是我的 updatechart() 代码。问题是，json 值没有更新。

【问题讨论】：

updatechart() 做什么？
updatechart()的正文是什么？
您的url 参数为空；在您的代码中是这样吗？还是只是问题中的错字？
我希望 url 是同一个页面。这就是为什么。
JavaScript 在客户端上运行（在这种情况下），更改 PHP 中的全局变量不会改变您在 javascript 中输出该全局变量的位置，除非您完全重新加载页面或再次重新包含 javascript。相反，根据 user1671639 的建议，从请求中返回 json 并将所述 json 传递到 updatechart()

标签： javascript ajax jquery

【解决方案1】：

这是预期的行为。将您的 PHP 处理移至其他页面。

$.ajax
({
    type: "POST",
    url: "anotherphppage.php",
    data: $("form").serialize(),
    success: function(result)
    {
        updatechart(result);      
    }
});

试试这个，你就会明白我的意思了：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#mybutt').click(function() {
                    $.ajax({
                        type: "POST",
                        url: "",
                        data: 'myVar=Hello',
                        success: function(data) {
                            alert(data);
                        }
                    });
                });
            }); //END $(document).ready()

        </script>
    </head>
<body>

    Try this:<br />
    <input type="button" id="mybutt" value="Click Me">

</body>
</html>

【讨论】：

【解决方案2】：

将result作为参数传递给updatechart()

$.ajax
({
    type: "POST",
    url: "",
    data: $("form").serialize(),
    success: function(result)
    {
        updatechart(result);      
    }
});

然后通过参数访问结果。

function updatechart(result) {
//.......
//.......
console.log(result);
}

希望你正在尝试这样的事情。

【讨论】：

是的，这是正确的方法，但看起来 OP 正在响应整个页面...
@user2510555 这可能是因为您的 PHP 仍在设置全局而不是返回 json。（通过回声）
@user2510555 你的ajax返回什么？ result = undefined，那ajax调用有什么用呢？
@user1671639 当我在成功函数中执行console.log(result); 时，它会返回带有更新值的整个页面。