首次使用jQuery实现无刷新换内容报错：swapContent未定义

核心问题：脚本标签类型错误 #

你的两个<script>标签里的type属性都写错了——type="/text/javascript"多了个前置斜杠，浏览器无法正确识别脚本类型，导致自定义的swapContent函数没有被加载，点击按钮时自然找不到这个函数。

修复步骤及优化方案 #

1. 修正脚本标签的type属性
   把两个脚本标签的type="/text/javascript"改成type="text/javascript"（去掉开头的斜杠），现代浏览器可省略type属性，但为兼容旧环境建议写正确格式。

2. 替换内联事件为jQuery绑定（更规范）
   内联onmousedown和onclick写法不利于维护，改用jQuery事件绑定方式，同时去掉按钮上无用的href属性。

3. 简化逻辑
   移除按钮上的onClick="return false"，在jQuery事件处理函数里用e.preventDefault()阻止默认行为即可。

修复后的完整代码 #

HTML与JS部分

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
    function swapContent(cv){
        "use strict";
        $("#myDiv").html("").show();
        var url="main_views.php";
        $.post(url, {contentVar: cv},function(data){
            $("#myDiv").html(data).show();
        });
    }

    // 页面加载完成后绑定事件
    $(function(){
        // 给按钮绑定点击事件
        $("button[data-content]").on("click", function(e){
            e.preventDefault();
            var cv = $(this).data("content");
            swapContent(cv);
        });
    });
</script>

<!-- 按钮部分修改 -->
<button data-content="con1">View One</button> &nbsp; • &nbsp;
<button data-content="con2">View Two</button> &nbsp; • &nbsp;
<button data-content="con3">View Three</button>

<!-- 确保页面存在id为myDiv的容器 -->
<div id="myDiv"></div>

PHP部分（main_views.php）

可增加参数校验避免未定义索引错误：

<?php
// 先检查参数是否存在
$contentVar = isset($_POST['contentVar']) ? $_POST['contentVar'] : '';

if ($contentVar == "con1"){
    echo "<p>Stuff</p>";
} else if ($contentVar == "con2"){
    echo "<p>Other Stuff</p>";
} else if ($contentVar == "con3"){
    echo "<h1>Yet more stuff</h1>";
} else {
    echo "<p>Invalid content</p>";
}
?>

额外说明 #

• 若坚持使用原教程的内联事件写法，仅修正脚本标签的type属性即可解决错误，但推荐用jQuery绑定事件的方式，更符合现代前端规范。
• 测试时确保jQuery文件路径正确，可在浏览器控制台Network标签确认jquery-1.5.1.js是否返回200状态。

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