在同一页面上将Ajax转换为PHP

bls*_*lsn 5 php ajax jquery

我正在尝试将变量发送到进行AJAX调用的同一页面。

仅当我分开PHP脚本时(例如process.php,相应地更改AJAX url),我才会收到成功的结果。

index.php

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data = 'You entered: ' . $_POST['name'];       
        echo json_encode($data);        
    }
?>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>

    <div id="result"></div>
</body>
Run Code Online (Sandbox Code Playgroud)

同一页是否可以捕获和处理我们使用AJAX传递的变量?

Art*_*iak 5

您可以dataType : json在 AJAX 设置中进行设置,以便您应该使用echojson对象而不是字符串 (HTML)。
使用exit()代替echo,并将 PHP 放在页面的最顶部。这样在检查是否$_POST['name']存在之前不会回显 HTML。

另一件事是您$data = array()在该行上转换为字符串:

$data = 'You entered:' . $_POST['name'];
Run Code Online (Sandbox Code Playgroud)

它应该是$data[] = ...

<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data[] = 'You entered:' . $_POST['name'];
        exit(json_encode($data));       
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <div id="result"></div>
</body>
Run Code Online (Sandbox Code Playgroud)