页面回发时如何防止javascript函数执行？

Question

我有这个从数据库生成组织结构图的Java脚本代码

 <script type="text/javascript">
    google.load("visualization", "1", { packages: ["orgchart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        $.ajax({
            type: "POST",
            url: "add org unit.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json", 

            success: function (r) {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Entity');
                data.addColumn('string', 'ParentEntity');
                data.addColumn('string', 'ToolTip');
                for (var i = 0; i < r.d.length; i++) {
                    var employeeId = r.d[i][0].toString();
                    var employeeName = r.d[i][1];
                    var designation = r.d[i][2];
                    var reportingManager = r.d[i][3] != null ? r.d[
                        i][3].toString() : '';
                    data.addRows([[{
                        v: employeeId,
                        f: '<a target="_blank" href="edit emp cv.aspx?employeeId='+employeeId+'">' + employeeName + '</a>' + '<div><span>' + designation + '</div></span>',
                    }, reportingManager, designation]]);
                }
                var chart = new google.visualization.OrgChart($("#chart")[0]);
                chart.draw(data, { allowHtml: true });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>

和这些Web方法在C＃代码后面

[WebMethod]
    public static List<object> GetChartData()
    {
        DataLayer.StoreDBEntities dbEntities  = new DataLayer.StoreDBEntities();
        List<object> chartData = new List<object>();
        List<DataLayer.org_unit> result = dbEntities.org_unit.ToList();
        foreach (DataLayer.org_unit unit in result)
        {
            string name = unit.org_unit_type.alias + " " + unit.name;
            string Details = "";

            if (unit.emp_assignment.ToArray().Length != 0)
            {
                List<DataLayer.emp_assignment> empAssigns = unit.emp_assignment.ToList();
                foreach (DataLayer.emp_assignment assign in empAssigns)
                {

                    Details += assign.job_title.alias + ":" + assign.employee.name + "<br/>";
                }
            }
            chartData.Add(new object[] { unit.id, name, Details, unit.upper_unit_id });
        }
        return chartData;

    }

尽管我根本没有调用Java脚本函数，但是每次回发和加载页面时都会重新生成图表

如何停止呢？ 我只想在单击时生成图表

Answer 1

首先，您需要删除此google.setOnLoadCallback(drawChart); 那么您可以使用jQuery click事件，如下所示：

$(function() {

    $('#draw-chart').click(function(event) {
         event.preventDefault();
         drawChart();
    });

});

在您的HTML中添加一个按钮，如下所示：

<button id="draw-chart">Draw Chart</button>