如何从 $.post 调用中取回数据？答案

【问题标题】：How to get data back from a $.post call?如何从 $.post 调用中取回数据？
【发布时间】：2015-06-25 15:57:16
【问题描述】：

我不想在搜索数据库时刷新页面，例如。在帖子上，所以我在使用$.post 呼叫方面得到了帮助，该呼叫可用于发送信息。有一个.done(function( data ){ 行我还没有使用。

我也遇到了这个问题，我不确定这是否与我的问题有关。

Return $.get data in a function using jQuery

我正在尝试搜索数据库、字符串匹配并返回具有匹配字符串的行。但我想在不刷新页面的情况下执行此操作，所以我认为我正在使用 $.post 调用并使用由 javascript（按钮）触发的 .done(function( data ){。

所以我有两个部分，我所在的页面和一个单独的 PHP 页面，该页面在发出调用时处理调用。

如何建立可以返回数据的桥接器？或者有更简单的方法吗？

【问题讨论】：

标签： ajax

【解决方案1】：

.done(function(){}) 方法正是您想要使用的，但您也可以查看$.post 函数的第三个参数（回调）。

在服务器端，执行所有查询并准备 jsoned 数组中的内容，例如：

// set up data to send
$contentArray = [
    'content' => 'Some content',
    'foo' => 'bar',
];

$jsonResults = json_encode($contentArray);
// you can always send header('Content-Type: application/json'); instead of using simple die function.
die($jsonResults);

然后在客户端：

<div class="content-container"></div>
<script type="text/javascript">
    function someFunc() {
        (...)
        $.post(addr, values, function(res) {
            var response = $.parseJSON(res);

            $('.content-container').html(response.content);
        });
    }
</script>

这应该只更新.content-container 类的内容。您可以发送任意数量的内容，甚至可以将准备好的视图显示在容器中。这取决于你。

编辑：

为了确定，您在某些按钮单击事件上调用 someFunc()，对吗？如果没有，请按以下步骤操作：

<div class="content-container"></div>
<a href="someScript.php" class="callMe" data-content-id="1">Click here</a>
<script type="text/javascript">
    function changePageContent(addr, contentId) {
        $.post(addr, {contentId:contentId}, function(res) {
            var response = $.parseJSON(res);
            $('.content-container').html(response.content);
        });
    }

    $('.callMe').on('click', function() {
        changePageContent($(this).attr('href'), $(this).attr('data-content-id'));

        return false;
    });
</script>

someScript.php:

<?php
    // you should force your script to allow only XML HTTP request here
    if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
        die('AJAX requests only..');
    }

    // always remember to escape somehow your post values before you use them
    $contentId = is_numeric($_POST['contentId']) ? intval($_POST['contentId']) : null;

    if (null == $contentId) (...) // throw exception or return status=false

    // do your mysql query like: "SELECT * FROM content WHERE id=".$contentId;

    // well, it would be better to send headers instead of that
    die(json_encode([
        'status' => true, // this is a good practice to send some info, if everything is fine, if mysql row has been found etc..
        'result' => $result, // mysql row, this is just in case you need other values to display
        'content' => $result['content'], // I assume you have 'content' column in your mysql
    ]));
?>

【讨论】：

我得到这个错误“未终止的正则表达式文字”，我几乎完全使用了你的代码，但我会再检查一次。无论如何，谢谢，我必须让它工作。
没关系，这是我的错，终于弄清楚如何在控制台上导航错误，这是一个注释掉代码问题
我也尝试过这个解决方案，我显然不知道我在做什么，没有任何反应。控制台中没有消息说“成功或失败”，html没有变化，我必须清楚地阅读这一点。但谢谢你们的回答。

【解决方案2】：

查看 Ajax 的 docs，那里确实有很多有用的信息。

简而言之，你可以这样做：

  function myPost() {
      // Set the data 
      var data = {
        'key'   : 'value',
        'key_2' : 'value_2' 
      };
      // Do the post
      $.post( '/your-url/', data, callBack );
  }

  function callBack( data ) {
      // If the $.post was successful
      success: function( data ) {
          // do stuff
          console.log( data ); // returned from your endpoint
      },
      // If there was an error
      error: function( jqXHR, textStatus ) {
          // do stuff
          console.log( "Request failed: " + textStatus );
      }
  }

  // On click of your element, fire the post request
  $('#element').on('click', function() {
      myPost();
  });

【讨论】：