如何使用Ajax将单个表单值传递给PHP?

时间:2017-08-09 07:46:48

标签: javascript php ajax

我试图将Ajax函数中的值传递给我的PHP(在同一页面中),但无法捕获它。我用警报显示值,它似乎正常工作,但PHP从未收到它。 php正在使用提交,但我想使用Ajax,因此不需要刷新页面。

AJAX

$(function(){
        $('#ucli').on('input', function() {
            var client = $('input[name="ucli"]').val();
            var dataString = "ucli=" + client;
            alert(dataString);
            $.ajax({
                type: "POST",
                data:  dataString,

                success: function(response){
                    $('ucli').html(data);


                }
            });  

        });
    });

PHP

if(isset($_POST['ucli'])){

    $em = mysqli_real_escape_string($conn,$_POST['ucli'] . '');
    //SQL STUFF
}

4 个答案:

答案 0 :(得分:0)

$(function(){
    $('#ucli').on('input', function() {
        var client = $('input[name="ucli"]').val();
        var dataString = "ucli=" + client;
        alert(dataString);
        $.ajax({
            type: "POST",
            data:  {ucli: client},
            success: function(response){
                $('ucli').html(data);
            }
        });
    });
});

答案 1 :(得分:0)

    $(function(){
    $('#ucli').on('input', function() {
    var client = $('input[name="ucli"]').val();
    var dataString = "ucli=" + client;
    alert(dataString);
    $.ajax({
    url: "path to php file",
    type: "POST",
    data:  dataString,

    success: function(response){
    $('ucli').html(data);


    }
    });  

    });
    });

答案 2 :(得分:0)

你没有使用GET方法,这意味着你从php:// input读取post有效负载,就像那样:

$entityBody = file_get_contents('php://input');

答案 3 :(得分:0)

PHP代码(发送到同一页面时)需要特别注意,以便在响应数据中不返回整个页面内容。为此,我倾向于使用以下方法 - ob_clean非常有用,因为它将清除生成到文档中该点的任何html的输出缓冲区

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['ucli'] ) ){
        /* 

            Prevent other page content prior to this point 
            being included in whatever response is sent by
            clearing the output buffer
        */
        ob_clean();

        /* Capture post variable */
        $ucli = filter_input( INPUT_POST, 'ucli', FILTER_SANITIZE_STRING );

        /* Do stuff */

        /* send response */
        echo $ucli;

        /* 
        Immediately terminate from this portion of code so that 
        the only response sent is what you determine above
        */
        exit();
    }

?>

ajax函数需要一个url - 当您尝试将POST请求发送到同一页面时,您可以使用location.href。回调(成功)函数应该处理响应,而在看起来它正在处理发送的数据之前。

$( function(){
    $('#ucli').on('input', function() {

        var client = $('input[name="ucli"]').val();
        var dataString = 'ucli=' + client;

        $.ajax({
            url: location.href,
            type: 'POST',
            data:  dataString,
            success: function( response ){
                $('ucli').html( response );
            },
            error: function( err ){
                alert( err )
            }
        });
    });
});

整页示例

<!doctype html>
<html>
  <head>
        <title>jQuery</title>
        <script src='//code.jquery.com/jquery-latest.js'></script>
        <script>
            $( function(){
                $('#ucli').on('input', function() {

                    var client = $('input[name="ucli"]').val();
                    var dataString = 'ucli=' + client;

                    $.ajax({
                        url: location.href,
                        type: 'POST',
                        data:  dataString,
                        success: function( response ){
                            $('#result').html( response );
                        },
                        error: function( err ){
                            alert( err )
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <?php

            if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['ucli'] ) ){
                /* 

                    Prevent other page content prior to this point 
                    being included in whatever response is sent by
                    clearing the output buffer
                */
                ob_clean();

                /* Capture post variable */
                $ucli = filter_input( INPUT_POST, 'ucli', FILTER_SANITIZE_STRING );

                /* Do stuff */

                /* send response */
                echo $ucli;

                /* 
                Immediately terminate from this portion of code so that 
                the only response sent is what you determine above
                */
                exit();
            }

        ?>

        <form name='jqt' method='post'>
            ucli:<input type='text' name='ucli' id='ucli' />
            <div id='result'></div>
        </form>
    </body>
</html>