0

如何使用 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>
4

3 回答 3

1

如果您通过 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". 要将 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;
于 2013-07-22T17:42:51.247 回答
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
});

干杯

于 2013-07-22T15:30:59.070 回答
1

你可以使用 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>
于 2013-07-22T15:23:17.090 回答