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

【问题标题】：how to prevent javascript function to execute when page is postback?页面回发时如何防止javascript函数执行？
【发布时间】：2016-07-16 11:06:11
【问题描述】：

我有这个从数据库生成组织结构图的 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脚本函数

如何阻止这种情况？我只想在单击时生成图表

【问题讨论】：

标签： javascript html asp.net function postback

【解决方案1】：

首先，你需要删除这个google.setOnLoadCallback(drawChart);，然后你可以像这样使用jQuery点击事件：

$(function() {

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

});

像这样在你的 HTML 中添加一个按钮：

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

【讨论】：