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

【问题标题】：Get page content from separate page into div on form submit without reloading current page在表单提交时将页面内容从单独页面获取到 div 中，而无需重新加载当前页面
【发布时间】：2016-08-09 04:50:09
【问题描述】：

我正在尝试从另一个页面获取数据并将其响应和内容加载到我拥有表单的页面中的 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" - 为什么它不起作用？

【问题讨论】：

查看浏览器的开发者控制台可能会帮助您自己解决这个问题。只是将来要考虑的事情。

标签： javascript php jquery ajax submit

【解决方案1】：

没有属性 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
    });

});

【讨论】：

此代码不起作用...它使用form.php 而不是dbresults.php
我跳过了 .attr()，但还用 $(function(){... >
太棒了！我只是说你在哪里找到了答案。当然，除非您发现此答案“更有帮助”。祝你有美好的一天:)

【解决方案2】：

您的$.ajax 调用中有一些错误。如果您想使用表单上当前的值，请仅使用.attr()，即使这样您也需要通过属性name而不是属性value进行选择。 p>

改成：

$.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: 'GET', // GET or POST
    url: 'dbresults.php', // the file to call
    success: function(response) { // on success..
        $('#form_output').html(response); // update the DIV
    }
});

您也可以使用$.get完成相同的任务

$.get('dbresults.php', $(this).serialize(), function(response) {
    $('#form_output').html(response);
});

此外，您需要将代码包装在 .ready() 块中：

$(document).ready(function() { // alternatively $(function() {
    [...]
});

【讨论】：

我注意到您没有使用ready 函数来确保您的代码在页面完成加载之前不会执行。编辑了我的答案。