在不打开结果新页面的情况下将表单的结果获取到 div答案

【问题标题】：Get the results of a form to a div without opening the results new page在不打开结果新页面的情况下将表单的结果获取到 div
【发布时间】：2013-07-21 09:34:02
【问题描述】：

如何使用 ajax 或任何其他方法将 result.php 的结果放入欢迎 div 以防止加载新页面？

    <div id="welcome">
                    <form action="result.php" method="post">
                        <input type="hidden" id="date" name="selected"/>

                        <select id="city" class="cities" data-role="none" name="City">
                            <option value="">Anyplace</option>
                            .
                            .
                            .
                        </select>
                        <select id="type" class="cities" data-role="none" name="Event">
                            <option value="">Anything</option>
                           .
                           .
                           .
                        </select>                   
                    <input type="submit" class="button" value="Ok Go!"/>
        <input id="current" name="current" type="hidden"/>
                </form>
    </div>

【问题讨论】：

可能重复：stackoverflow.com/questions/1218245/…
Yobac 是正确的，action 参数使您的页面重新加载，并且 Ankit 使用 $.ajax() 的想法是正确的（尽管代码有一些语法错误）。但是根本不需要使用<form> 标签。请参阅我的答案以获取完整的详细信息。

标签： php jquery ajax

【解决方案1】：

valit 是 action="result.php" 让您的页面重新加载

您应该尝试为您的表单提供一个 id，并使用简单的 ajax 调用：

$("#formId").submit(function() {
    $.ajax({
        url: 'result.php',
        success: function(response) {
            $("#welcome").setValue(response); // update the DIV
        }
    });
    return false; // prevent form submitting
});

干杯

【讨论】：

【解决方案2】：

你可以使用 jQuery Ajax 来做这样的事情

在您的头部标签或页脚中使用以下代码

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


    <script type='text/javascript>
     $('document').ready(function(){ //after page load
        $('.button').on('click', function(e){
             e.preventDefault(); //prevent default action
             $.ajax({
              'url': 'result.php',
              'type: 'POST',
              'success': function(response){
                 $('#welcome').html(response);
               }
             });
            });
    });
 </script>

【讨论】：

谢谢，但我应该如何编辑现有的 html 表单？
@AnkitPokhrel 您的脚本中有拼写错误。它应该读作<script type='text/javascript'> 而不是<script type='text/javscript>。

【解决方案3】：

如果您通过 AJAX 执行此操作，则不需要 <form> 代码。 <form> 代码仅在您发布到其他页面并希望视图更改/刷新时才有用。

此外，在此示例中使用<form> 代码将导致页面刷新（并且 jQuery 插入的值会丢失）以使用“设置隐藏字段当前值”按钮的附加位。并不是说它在您的真实应用中可能很重要，但仅供参考。

Ajax 进入您的 javascript 代码，如下所示：

$('#mySelect').change(function() {
    var sel = $(this).val();
    //alert('You picked: ' + sel);

    $.ajax({
        type: "POST",
        url: "your_php_file.php",
        data: 'theOption=' + sel,
        success: function(whatigot) {
            alert('Server-side response: ' + whatigot);
        } //END success fn
    }); //END $.ajax
}); //END dropdown change event

注意，PHP文件中ECHO的数据在AJAX调用的成功函数中进入你的HTML文档，必须处理那里。这就是您将接收到的数据插入 DOM 的地方。

例如，假设您的 HTML 文档有一个带有 id="myDiv" 的 DIV。要将 PHP 中的数据插入 HTML 文档，请将以下行：alert('Server-side response: ' + whatigot); 替换为：

$('#myDiv').html(whatIgot);

快！您的 DIV 现在包含从 PHP 文件回显的数据。

这是您自己的示例的有效解决方案，使用 AJAX：

HTML 标记：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('#mybutt').on('click', function(e){
                    e.preventDefault(); //prevent default action
                    var ct = $('#city').val();
                    var dt = $('#date').val()
                    var ty = $('#type').val();
                    var curr = $('#current').val();
                    $.ajax({
                        url: 'result.php',
                        type: 'POST',
                        data: 'ct=' +ct+ '&dat=' +dt+ '&t=' +ty+ '&curr=' +curr,
                        success: function(response){
                            $('#welcome').html(response);
                        }
                    });
                });

                $('#mycurr').click(function(){
                    var resp = prompt("Please type something:","Your name");
                    $('#current').val(resp);
                });


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="welcome">
        <input type="hidden" id="date" name="selected"/>

        <select id="city" class="cities" data-role="none" name="City">
            <option value="sumwhere">Anyplace</option>
            <option value="anutherwhere">Another place</option>
        </select>
        <select id="type" class="cities" data-role="none" name="Event">
            <option value="sumthing">Anything</option>
            <option value="anutherthing">Another thing</option>
        </select>                   
        <input type="submit" id="mybutt" class="button" value="Ok Go!"/>
        <input type="submit" id="mycurr" class="button" value="Set value for hidden field CURRENT"/>
        <input id="current" name="current" type="hidden"/>
    </div>


</body>
</html>

PHP 处理器文件：result.php

$ct = $_POST['ct'];
$date = $_POST['dat'];
$typ = $_POST['t'];
$cu = $_POST['curr'];

if ($date == '') {
    $date = 'Some other date';
}

$r = '<h1>Results sent from PHP</h1>';

$r .= 'Selected city is: [' .$ct. ']<br />';
$r .= 'Selected date is: [' .$date. ']<br />';
$r .= 'Selected type is: [' .$typ. ']<br />';
$r .= 'Hidden field #CURRENT is: [' .$cu. ']<br />';

$r .= '<h2>And that\'s all she wrote....</h2>';

echo $r;

【讨论】：

必须有更好的方法来做到这一点。似乎您想要返回的每个结果都必须在 ajax“var”和“data:”中。更不用说在PHP中了。我让 PHP 文件显示在隐藏的 div 中，但没有结果。但我可能有 50 个带有各种结果的问题。一定是更好的方法？？？？？？
(1) 通常，对于像测验这样的应用程序，您会将答案存储在服务器上的 MySQL 数据库中（出于安全原因）。在 result.php 中，您将添加一些代码以将识别问题的数据发送（到服务器）到 MySQL，并接收回正确的答案。然后，您可以（仍在 result.php 中）确定用户的响应是否正确，并仅将布尔结果返回到 HTML 页面上的该 ajax 代码块。
(2) 在这里使用 AJAX 的一些优点是您 (a) 不会将您的答案暴露给使用 DevTools 的人，(b) 您检查数据库并返回结果而不刷新 HTML 页面
(3) 请注意，每次用户触发事件检查服务器端数据库中的答案（例如通过单击“提交”或“检查答案”的按钮），开销AJAX 读取服务器上的答案并返回响应可以忽略不计。通常，每次按下按钮时，AJAX 例程都会在不到一秒的时间内检查并返回响应。如果需要更长的时间，您真的有一个糟糕的虚拟主机（或免费的，在这种情况下怎么能抱怨呢？）