Question

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

这是我的index.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>

以下是defaultPhp.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标签中？

Answer 1

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

Answer 2

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

因为javascript不知道您的表单，所以在文档准备好之前

Answer 3

通过$.post的Ajax请求不会阻止本机浏览器行为将页面发送到服务器。您必须使用事件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 here的更多信息。

Answer 4

首先..yoyu不需要删除$（document）.ready（function（）{...}）;从你的脚本...也不要删除脚本标记否则你的脚本将停止工作...如果加载...请检查wethet您给出的路径是正确的...

e.g。 $（＆＃34; #display＆＃34;）。load（＆＃34; ajax / test.php＆＃34;）;

Jquery（ajax）加载功能不起作用？

4 个答案: