使用StringBuilder向iframe写入完整AJAX逻辑时提示Cancel未定义如何解决？

问题核心原因 #

带有src属性的<script>标签，标签内部嵌套的JS代码会被浏览器直接忽略，你将jQuery引入和Cancel函数定义写在了同一个script标签内，导致Cancel函数从未被注册到全局作用域，点击按钮调用时就会抛出未定义的错误。

修复方案 #

1. 拆分script标签 #

将jQuery引入和自定义函数拆分为两个独立的script标签：

• 第一个标签仅用于引入jQuery，不写额外代码
• 第二个标签不需要src属性，专门用于定义Cancel函数

2. 额外优化点 #

• 你当前传入的参数是普通数字，processData: false和contentType: false是上传FormData场景才需要的配置，普通请求可以删除，避免参数解析异常
• ASP.NET MVC的默认路由规则不需要写Controller后缀，接口路径/HomeController/Does_stuff要改成/Home/Does_stuff，否则会触发404错误
• 原拼接代码漏了<tr>开头标签，会导致表格渲染异常，需要补上

修改后的C#代码示例 #

StringBuilder sb = new StringBuilder();
// 第一个script单独引入jQuery
sb.Append("\n<script src=\"~/lib/jquery/dist/jquery.min.js\"></script>");
// 第二个script写自定义函数
sb.Append("\n<script>function Cancel(input) { \n$.ajax({\n");    
sb.Append(" url: \"/Home/Does_stuff\",\n");
sb.Append(" data: {input: input},\n");
sb.Append(" type: \"POST\",\n");
sb.Append(" success: function (data) {\n");
sb.Append(" location.reload();\n");
sb.Append("}\n");
sb.Append("})}</script>");
foreach (DataRow data_rows in data.Rows)
{
    sb.Append("<tr>"); 
    foreach (DataColumn column in data.Columns)
    {
        sb.Append("<td style='width:100px;border: 1px solid #ccc'>" + data_rows[column.Name].ToString() + "</td>");
    }
    sb.Append("<td> <button onclick=\"Cancel(" + data_rows["Request Number"] + ")\">Cancel</button> </td>");
    sb.Append("</tr>");
}

修复后iframe渲染的最终代码示例 #

<script src="/lib/jquery/dist/jquery.min.js"></script>
<script>
function Cancel(input) { 
    $.ajax({
        url: "/Home/Does_stuff",
        data: {input: input},
        type: "POST",
        success: function (data) {
            location.reload();
        }
    })
}
</script>

<table cellpadding='5' cellspacing='0' style='border: 1px solid #ccc;font-size: 9pt;font-family:Arial'>
<tr>
<td style='width:100px;border: 1px solid #ccc'>Completed</td>
<td>
    <button type="button" value="Submit">Update</button>
</td>
<td>
    <button onclick="Cancel(12)">Cancel</button>
</td>
</tr>
</table>

内容的提问来源于stack exchange，提问作者Francisco Perez