如何使用 Jquery AJAX 获取 POST 数据答案

【问题标题】：How to get POST data using Jquery AJAX如何使用 Jquery AJAX 获取 POST 数据
【发布时间】：2017-09-28 17:33:48
【问题描述】：

我正在尝试使用 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 数据。

谢谢

【问题讨论】：

只是添加一件事。 #mybtn-1 和 #test_wrap 都在同一页面上

标签： javascript php jquery html ajax

【解决方案1】：

你不需要用 PHP 回显它，你可以直接从 jQuery 成功回调中显示它：

$.ajax({
    url: "../test_chat.php",
    method: "POST",
    data:{
        sweet: newSweet
    },
    success: function(data) {
        $('#test_wrap').load("../test_chat.php").fadeIn("slow");

        if (data !== null && data !== undefined) {
            alert('Success');

            // Here "data" is whatever is returned from your POST
            $("#some_content").html(data);
        }
    }
});

【讨论】：

【解决方案2】：

你可以在发布请求后直接从你的test_chat.php文件中返回数据，这里不需要双重请求，返回数据如下：

<?php 
    return $_POST["sweet"].' \n hellow';
?>

然后将其附加到 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');
            }
        });
   }
});

希望这会有所帮助。

【讨论】：

#mybtn-1 和 #test_wrap 都在同一页面上。
它只给我成功提醒
尝试在警报前添加console.log(data)，看看会显示什么。

【解决方案3】：

在js文件中做这种方式的ajax请求：

$.ajax({
            data: {keys: values}/*keys you need to post (sweet: newsweet)*/
            , type: 'post'
            , dataType: 'json'
            , url: './php/someFile.php'
            , error: function (jqXHR, status, err) {
                console.log(jqXHR, status, err);
            }
            , success: function (response) {
                /*use response to innerHTML into a div here*/
            }
        });

在 php 中使用 echo json_encode：

<?php
    echo json_encode($_POST["sweet"] /*or some value from function in php*/);/*of this way, you can return a response 
    from server to client, echo just print something, but does not return...*/
?>

【讨论】：