如何防止 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 单击事件：

$(function() {

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

});

像这样向 HTML 添加一个按钮：

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

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

how to prevent javascript function to execute when page is postback?

html

javascript

asp.net

postback

function