Jquery (ajax） load function 不起作用 - Jquery (ajax) load function not working?

我对JQuery和Ajax函数相当陌生，我不知道为什么我的脚本总是崩溃。我基本上有一个表单，用户可以在其中输入他们的姓名和位置。当用户提交表单时，脚本使用 JQuery 的 $.post（）函数将用户值发送到 "locationHandler.php"，后者获取用户信息（名称和位置）并将其存储在 mysql 数据库中。$.post 请求成功后，我想使用 JQuery 的 .load（）函数来更新任意div 标签内的 html。每次提交表单时，脚本都会将数据存储到 mysql 数据库中，因为它打算这样做，但是脚本无法 .load（）我的 php 文件。

这是我的索引.php页面的代码：

<?php ?>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#locationForm").submit(function() {
            var unameVal = $("#locationForm input[name='uname']").val(); 
            var locationVal = $("#locationForm select[name='location']").val();
            $.post("locationHandler.php", {uname: unameVal, location: locationVal}, function() {
                 $("#display").load("defaultPhp.php");
            });
        });
    });
</script>
</head>
<body>
    <form id="locationForm" method="post">
        <label>Name:</label>
            <input type="text" name="uname" />
        <label>Location:</label>
            <select name="location">
                <option value="uncc">UNC Charlotte</option>
                <option value="ncsu">NC State</option>  
            </select>
        <input type="submit" value="Submit" />
    </form>
    <div id="display"></div>
</body>
</html>

这是我的默认 Php.php 页面的代码，它与我的 index.php 页面位于同一目录中：

<?php 
     echo "<p>This is some arbitrary text</p>";
?>

我尝试删除$(document).ready(function(e) { ... });并将脚本标签直接放在结束</form>标签下方，但随后脚本停止将数据存储到 mysql 数据库中。

所以首先，为什么如果我从上面的脚本中删除$(document).ready(function(){...});，它会停止将值存储到 mysql 数据库中吗？

其次，为什么脚本不会将我的 defaultPhp.php 页面的内容加载到div 标签中？

请在提交功能结束前使用返回 false。

所以首先，为什么如果我从上面的脚本中删除$（document）.ready（function（）{...};，它会停止将值存储到mysql数据库中吗？

因为javascript不知道你的表单，直到文档准备好

Ajax 通过$.post请求不会阻止本机浏览器将页面发送到服务器的行为。您必须使用事件preventDefault函数来取消它：

$(document).ready(function() {
    $("#locationForm").submit(function(e) {
        e.preventDefault();//stop form submiting
        var unameVal = $("#locationForm input[name='uname']").val(); 
        var locationVal = $("#locationForm select[name='location']").val();
        $.post("locationHandler.php", {uname: unameVal, location: locationVal}, function() {
             $("#display").load("defaultPhp.php");
        });
    });
});

有关preventDefault的更多信息，请点击此处。

首先..yoyu 不需要删除 $（document）.ready（function（）{...}）;从您的脚本...也不要删除脚本标签，否则您的脚本将停止工作...在负载的情况下...请检查您给出的路径是否正确...

例如 $（ "#display" ）.load（ "ajax/test.php"）;