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

Question

这是根据我之前的问题构建的，位于此处

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

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

链接是：

<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;
            }
    }
?>

score 0 · Accepted Answer

<?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 } ?>

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

要使用 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。

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

3 回答 3

Related

Reference