将页面内容从单独的页面获取到表单提交的div中，而无需重新加载当前页面

eqinna 发表于 Dev

eqinna

我试图从另一个页面获取数据并将其响应和内容加载到我拥有表单的页面中的div中，而不重新加载表单页面。当我尝试此代码时，它将刷新页面，并且不会获取结果。

我拥有表单的当前jquery代码-form.php：

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$('#skipreload').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('GET'), // GET or POST
        url: $(this).attr('dbresults.php'), // the file to call
        success: function(response) { // on success..
            $('#form_output').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
</script>
</head>
<body>

<form id="skipreload" method="GET" action="form.php">
<input type="text" name="id">
<input type="submit" value="Get results">
</form>

<div id="form_output">
<!--Show the result here from dbresults.php-->
</div>

</body>
</html>

我要从中获取结果的页面中的代码-dbresults.php：

include("dbsettings.php");

$id = "";

if ($_GET)
{
$id = $_GET['id'];

    $sql = "SELECT Results FROM Table WHERE id = '$id';";
    $result = mysql_query($sql);

    while($row = mysql_fetch_array($result))
    {
        echo $row["Results"]";
    }
}

当我在form.php中提交表单时，页面重新加载而没有将结果从getresults.php放入div“ #form_output”-为什么它不起作用？

查理

没有attribute GET，它是的值，method没有属性'dbresults.php'是该action属性的值。

另外，您的代码在表单存在之前就被调用了

尝试：

$(function(){ // wait until documented is ready so element exists

    $('#skipreload').submit(function() { // catch the form's submit event
        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $('#form_output').html(response); // update the DIV
            }
        });
        return false; // cancel original event to prevent form submitting
    });

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。