繁体   English   中英

Ajax调用后什么也没有返回

[英]Nothing returns after ajax call

下面是我的Php文件,在提交按钮后,我使用ajax从中调用另一个php文件来获取一些数据:

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

    <body>

        <form enctype="">
            <button class="refresh"> submit </button>
            <input placeholder="text here" name="roll" >

        </form>

            <script>

                $(document).ready(function(){

                    $('.refresh').click(function(){
                      //  var formData = new FormData($(this)[0]);
                        //event.preventDefault();
                        $.ajax({
                            url:'ajax.php',
                            type:'POST',
                            data:{roll:'rana'},
                            //async:false,
                            success:function(response){
                                alert(response);
                                //document.write(response);
                            },
                            cache:false,
                            contentType:false,
                            processData:false
                        });return fasle;
                    });                               
    });
            </script>


    </body>
    </html>

另一个php文件是:

<?php 
echo 'rana';
echo $_POST["roll"];
?> 

当我写一些文本并单击提交按钮时,输入字段的文本显示在url中,并且没有从另一个php文件中获取任何数据。 为什么? 谁能给我一些线索或帮助? 谢谢。

单击按钮后,表单已提交,您需要使用preventDefault()方法停止该行为。 将脚本替换为以下内容:

<script>

            $(document).ready(function(){

                $('.refresh').click(function(e){
                  e.preventDefault(); // this line will prevent submission of form
                  //  var formData = new FormData($(this)[0]);
                    //event.preventDefault();
                    $.ajax({
                        url:'ajax.php',
                        type:'POST',
                       // data:{roll:'rana'},
                        //async:false,
                        success:function(response){
                            alert(response);
                            //document.write(response);
                        },
                        cache:false,
                        contentType:false,
                        processData:false
                    });return fasle;
                });                               
});
        </script>

您没有在ajax.php文件中收到任何POST数据,因为没有任何data ,ajax请求中的data对象为空并已注释掉。

与您期望的相反,您不能仅通过POST将表单值发送到PHP文件,类似于使用action="file.php method="post"因为在AJAX中,您必须手动“构建” data作为POST请求发送的对象。

运作方式如下:

表格文件:

<form>
    <input placeholder="text here" id="string">
    <input type="submit" class="refresh" value="submit">
</form>

<script>
$(document).ready(function() {
    $('.refresh').click(function(e) {
    e.preventDefault();
        $.ajax(
        {
            url:'ajax.php',
            type:'POST',
            data:{
                string: $('#string').val()
            },
            success:function(response) {
                alert(response);
            }
        }
        );
    });
});
</script>

后端文件:

<?php
echo $_POST['string'];
?>

请注意,我是如何通过id而不是name命名输入的,并通过$('#string').val()检索值,然后将其分配给通过POST请求发送的string 您应该对表单中的每个输入字段执行相同的操作。

另外,您不需要这些:

cache:false,
contentType:false,
processData:false

因为原因。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM