javascript - 如何使用Jquery AJAX获取POST数据

Question

我正在尝试使用 AJAX 发布简单数据。我的 HTML 代码是

<input type="text" value="myvalue" id="sweet" name="sweet">
<button type="submit" id="mybtn-1">

我的 JQuery 代码是

$('#mybtn-1').click(function(){

   var newSweet = $('#sweet').val();
   if($.trim(newSweet) !== '')
   {
    $.ajax({
        url:"../test_chat.php",
        method:"POST",
        data:{sweet:newSweet},
        dataType:"text",
        success:function(data){
            $('#test_wrap').load("../test_chat.php").fadeIn("slow");
            alert('Success');
        }
    });
   }
});

我的 test_chat.php 代码是

<?php 
    echo $_POST["sweet"];
    echo 'hello';
?>

我想在名为“test_wrap”的 div 中回显 POST 数据。问题是点击按钮后，我只能在页面上回显“hello”。

我知道发生这种情况是因为加载函数正在重新加载 PHP 文件，但我正在寻找解决方案，以便可以在页面上显示 POST 数据。

Answer 1

您可以在post请求后直接从test_chat.php文件返回数据，这里不需要双重请求，返回数据如下:

<?php 
    echo $_POST["sweet"];
    echo 'hello';
?>

然后将其附加到 div #test_wrap 中，如下所示:

$('#mybtn-1').click(function(){
    var newSweet = $('#sweet').val();

    if($.trim(newSweet) !== ''){
        $.ajax({
            url:"../test_chat.php",
            method:"POST",
            data:{sweet:newSweet},
            dataType:"text",
            success:function(data){
                $('#test_wrap').html(data).fadeIn("slow");

                alert('Success');
            }
        });
   }
});

希望这有帮助。