如何使用 JQuery .load(this.href) 处理 POST 请求？答案

【问题标题】：How to handle POST requests using JQuery .load(this.href)?如何使用 JQuery .load(this.href) 处理 POST 请求？
【发布时间】：2013-09-20 15:15:59
【问题描述】：

这是根据我之前位于here的问题构建的

我有一个表单 (tsconfig.php) 使用 .load(this.href) 加载到一个 div 中，它将结果发布到自己，但是表单重新加载整个页面并显示 tsconfig.php 而不是将输出放入分区。我该如何解决这个问题，以便在表单的位置显示输出？

附：在你向前看之前，我意识到有些代码很乱，可能不是最好的方法；它是来自旧脚本的代码，我正试图将其移植到修改后的脚本中，但我从来没有经验。我在边做边学。

链接是：

<li><a class="ajax-link" href="/includes/scripts/tsconfig.php">TSConfig</a></li>

脚本是：

<div class="grid_3" id="main_content">
    <script>
        $(function() {
            $("a.ajax-link").on("click", function(e) {
                e.preventDefault();
                $("#main_content").load(this.href);
            });
        });
    </script>

</div>

tsconfig.php 格式为：

<?php include("output_scripts.php"); ?>
<h4>TSConfig</h4>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>" method="post">
    <table width="100%" cellpadding="10" cellspacing="0">
        <tr>
            <td colspan="3" style="width:99%">
                <label>InstallShield Version</label><br />
                    <select name="isVersion" onchange="javascript:setTimeout('__doPostBack(\'ddlVersion\',\'\')', 0)" id="isVersion" class="box">
                        <option selected="2012Spring" value="2012Spring">2012 Spring</option>
                        <option value="2012">2012</option>
                        <option value="2011">2011</option>
                        <option value="2010">2010</option>
                        <option value="2009">2009</option>
                        <option value="2009 Express">2009 Express</option>
                        <option value="IS2008">2008</option>
                        <option value="IS 2008 Express">2008 Express</option>
                    </select>

                    <tr>
                        <td colspan="3" style="width:99%">

                            <input type="checkbox" name="no_internet" value="no_internet"> no_internet
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3" style="width:99%">

                            <input type="submit" name="submit" value="submit">
                        </td>
                    </tr>
            </td>
        </tr>
    </table>
</form>

<?php
    if(isset($_POST['submit'])){
            if ($isVersion == "IS2008" && empty($_POST['no_internet']) || $isVersion == "IS 2008 Express"  && empty($_POST['no_internet']))
            {
                echo $output_macrovision;
            }
            elseif ($isVersion == "IS2008" && isset($_POST['no_internet']) || $isVersion == "IS 2008 Express" && isset($_POST['no_internet']))
            {
                echo $output_macrovision_no_internet;
            }
            elseif (isset($_POST['submit']) && empty($_POST['no_internet']))
            {
                echo $output_script;
            }
            elseif (isset($_POST['no_internet']))
            {
                echo $output_script_no_internet;
            }
    }
?>

【问题讨论】：

如果您不想在提交表单时重新加载整个页面。您要么必须使用 iframe 加载表单，要么使用 ajax 请求提交表单。
使用 ajax 请求的功能是什么？非常感谢。
@DaveMelia 它是 $.ajax。

标签： javascript php jquery html css

【解决方案1】：

如果 preventDefault 不起作用，您可能根本没有捕捉到该事件。如果您想确定，请在您的事件处理程序中放置一个警报。

$("a.ajax-link").on("click", function(e) {
    alert('Event handler was fired');
    e.preventDefault();
    $("#main_content").load(this.href);
});

编辑：此外，如果您需要将信息与您的请求一起传递给服务器，请使用 $.ajax()，如果服务器不需要任何信息来显示所需的输出，请使用 $.load()。

【讨论】：

【解决方案2】：

要使用 ajax 处理表单提交，以便只有表单会重新加载，您可以使用这些方面的内容。这是我创建的测试页面，具有您正在寻找的功能（我认为）

<?php
if ($_POST) {
    print_r($_POST);
}
else
{
    ?>
    <form id="form_id">
        <input name="01" type="text" value="test1" />
        <input name="02" type="text" value="test2" />
        <input name="03" type="text" value="test3" />
        <input type="submit" value="submit" />
    </form>

    <div id="main_content"></div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(function() {

            $('body').on('submit', '#form_id', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "test.php",
                    data: $(this).serialize(),
                    type: 'post'
                }).done(function(response) {
                    $('#main_content').html(response);
                });
            });

        });

    </script>
    <?php
}
?>

我使用了 $('body') jquery 句柄而不是 $('#form_id')，因为您已经使用 jQuery 动态加载内容，而且我相信（未完全测试）事件在内容时不能使用标准符号是这样加载的。因此需要在body 上处理该事件，然后在#form_id 上处理。

【讨论】：

非常感谢这个——它有点工作，因为整个页面不再重新加载，但是没有显示输出。我将根据您的代码添加一个包含我使用过的代码的答案。
您需要更改我写url: "test.php" 的位置以使用您提交的表单的网址，然后它应该可以工作。
您看起来还需要在下面的示例中包含 jQuery，除非您在其他地方这样做。
哈，我能发誓我改变了那个——但是它没有用。 ` $(function() { $("a.ajax-link").on("click", function(e) { e.preventDefault(); $("#main_content").load(this.href); }); });`

【解决方案3】：

<?php include("output_scripts.php"); ?>

<?php
if ($_POST) {
    print_r($_POST);
} else {
?>

<form id="form_id">
    <table width="100%" cellpadding="10" cellspacing="0">
        <tr>
            <td colspan="3" style="width:99%">
                <label>InstallShield Version</label><br />
                <select name="isVersion" id="isVersion" class="box">
                    <option selected="2012Spring" value="2012Spring">2012 Spring</option>
                    <option value="2012">2012</option>
                    <option value="2011">2011</option>
                    <option value="2010">2010</option>
                    <option value="2009">2009</option>
                    <option value="2009 Express">2009 Express</option>
                    <option value="IS2008">2008</option>
                    <option value="IS 2008 Express">2008 Express</option>
                </select>

                <tr>
                    <td colspan="3" style="width:99%">
                        <br />
                        <input type="checkbox" name="no_internet" value="no_internet"> no_internet
                    </td>
                </tr>

                <tr>
                    <td colspan="3" style="width:99%">
                        <br />
                        <input type="submit" name="submit" value="submit">
                    </td>
                </tr>
            </td>
        </tr>
    </table>
</form>

    <?php if(isset($_POST['submit'])){
        if ($isVersion == "IS2008" && empty($_POST['no_internet']) || $isVersion == "IS 2008 Express"  && empty($_POST['no_internet']))
        {
            echo $output_macrovision;
        }
        elseif ($isVersion == "IS2008" && isset($_POST['no_internet']) || $isVersion == "IS 2008 Express" && isset($_POST['no_internet']))
        {
            echo $output_macrovision_no_internet;
        }
        elseif (isset($_POST['submit']) && empty($_POST['no_internet']))
        {
            echo $output_script;
        }
        elseif (isset($_POST['no_internet']))
        {
            echo $output_script_no_internet;
        }
    }
    ?>

    <script>
        $(function() {

            $('body').on('submit', '#form_id', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "test.php",
                    data: $(this).serialize(),
                    type: 'post'
                }).done(function(response) {
                        $('#main_content').html(response);
                    });
            });

        });
    </script>

<?php } ?>

【讨论】：