Php 在不打开结果新页面的情况下，将表单的结果获取到div_Php_Jquery_Ajax

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

php jquery ajax

Php 在不打开结果新页面的情况下，将表单的结果获取到div,php,jquery,ajax,Php,Jquery,Ajax,如何使用ajax或任何其他方法将result.php的结果输入欢迎div，以防止加载新页面 <div id="welcome"> <form action="result.php" method="post"> <input type="hidden" id="date" name="selected"/> <

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


随便
.
.
.
任何东西
.
.
.

您可以使用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>


您可以使用jQueryAjax执行类似的操作
在头标签或页脚中使用以下代码
    <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>


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

干杯
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
});

干杯
如果您是通过AJAX实现的，那么就不需要
代码。
代码仅在您发布到其他页面并且希望视图无论如何都会更改/刷新时才有用
此外，在本例中使用
代码将导致页面刷新（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'd进入AJAX调用的success函数中的HTML文档，并且必须在那里进行处理。这就是将接收到的数据插入DOM的地方
例如，假设您的HTML文档有一个DIV，带有id=“myDiv”
。要将PHP中的数据插入HTML文档，请替换以下行：alert（'服务器端响应：'+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>


$（文档）.ready（函数（）{
$（'mybutt'）。在（'click'，函数（e）上{
e、 preventDefault（）；//防止默认操作
var ct=$（'#city'）.val（）；
var dt=$（'日期'）.val（）
var ty=$（'#type'）.val（）；
var curr=$（'#current'）.val（）；
$.ajax({
url:'result.php'，
键入：“POST”，
数据：'ct='+ct+'&dat='+dt+'&t='+ty+'&curr='+curr，
成功：功能（响应）{
$（'welcome'）.html（回复）；
}
});
});
$（'#mycurr'）。单击（函数（）{
var resp=prompt（“请键入某物：”，“您的姓名”）；
$（'当前'）.val（分别）；
});
}); //END$（document.ready（））
随便
另一个地方
任何东西
还有一件事

PHP处理器文件：result.PHP

$ct=$\u POST['ct']；
$date=$_POST['dat']；
$typ=$_POST['t']；
$cu=$_POST['curr']；
如果（$date=''）{
$date='其他日期'；
}
$r='从PHP发送的结果'；
$r.='所选城市为：['.$ct.]
；
$r.='所选日期为：['.$date.']
；
$r.='所选类型为：['.$typ.']
；
$r.='隐藏字段#当前为：['.$cu.]
；
$r.=“这就是她写的全部……”；
echo$r；
如果您是通过AJAX实现的，那么就不需要
代码。
代码仅在您发布到其他页面并且希望视图无论如何都会更改/刷新时才有用
此外，在本例中使用
代码将导致页面刷新（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'd进入AJAX调用的success函数中的HTML文档，并且必须在那里进行处理。这就是将接收到的数据插入DOM的地方
例如，假设您的HTML文档有一个DIV，带有id=“myDiv”
。要将PHP中的数据插入HTML文档，请替换以下行：alert（'服务器端响应：'+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>


$（文档）.ready（函数（）{
$（'mybutt'）。在（'click'，函数（e）上{
e、 preventDefault（）；//防止默认操作
var ct=$（'#city'）.val（）；
var dt=$（'日期'）.val（）
var ty=$（'#type'）.val（）；
var curr=$（'#current'）.val（）；
$.ajax({
url:'result.php'，
键入：“POST”，
数据：'ct='+ct+'&dat='+dt+'&t='+ty+'&curr='+curr，
成功