Javascript Jquery（ajax）加载函数不工作？_Javascript_Php_Jquery_Mysql_Ajax

Javascript Jquery（ajax）加载函数不工作？

javascript php jquery mysql ajax

Javascript Jquery（ajax）加载函数不工作？,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,我对JQuery和Ajax函数相当陌生，我不明白为什么我的脚本不断崩溃。我基本上有一个表单，用户输入他们的名字和位置。当用户提交表单时，脚本使用JQuery的$.post函数将用户值发送到locationHandler.php，locationHandler.php获取用户信息名称和位置，并将其存储在mysql数据库中。在$.post请求成功后，我想使用JQuery的.load函数更新任意div标记中的html。每次提交表单时，脚本都会将数据存储到mysql数据库中，这是它的初衷，但是脚本无法加

我对JQuery和Ajax函数相当陌生，我不明白为什么我的脚本不断崩溃。我基本上有一个表单，用户输入他们的名字和位置。当用户提交表单时，脚本使用JQuery的$.post函数将用户值发送到locationHandler.php，locationHandler.php获取用户信息名称和位置，并将其存储在mysql数据库中。在$.post请求成功后，我想使用JQuery的.load函数更新任意div标记中的html。每次提交表单时，脚本都会将数据存储到mysql数据库中，这是它的初衷，但是脚本无法加载我的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>

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

以下是我的defaultPhp.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>

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

我已尝试删除$document.readyFunction{…}；并将脚本标记直接放在结束标记下，但随后脚本停止将数据存储到mysql数据库中

那么首先，为什么我要删除$document.readyfunction{…}；从上面的脚本中，它会停止将值存储到mysql数据库中吗

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

那么首先，为什么我要删除$document.readyfunction{…}；从上面的脚本中，它会停止将值存储到mysql数据库中吗

因为javascript不知道您的表单，所以在文档准备就绪之前，请在提交函数结束之前使用return false。

通过$进行Ajax请求。post不会阻止通过本机浏览器行为将页面发送到服务器。您必须使用event 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.readyfunction{…}；从您的脚本…也不要删除脚本标签，否则您的脚本将停止工作…如果加载…请检查您提供的路径是否正确

e、 g.$display.load ajax/test.php

我建议你使用$.ajax^^^^^哇，我现在觉得很愚蠢，哈哈，哦，好吧，太晚了。谢谢，这很有效^^^谢谢，这也很有效^^是的，但即使我给文档足够的时间加载，脚本仍然无法工作。我想我不明白将脚本包装到文档中的重要性function@Yonny例如：如果您将脚本部分附加到正文的末尾，而没有document.ready检查，那么它也应该可以工作$locationForm.submitfunction{var unameVal=$locationForm输入[name='uname'].val；var locationVal=$locationForm选择[name='location'].val；$.postlocationHandler.php，{uname:unameVal，location:locationVal}，函数{$display.loaddefaultPhp.php；}；}；