Question

我在互联网上搜索过，而且我还没有找到答案，我认为这是一个简单的问题。我刚刚开始介入AJAX和js，所以请原谅我这是一个非常愚蠢的问题！

如何在AJAX回调中返回html和变量。

假设我想执行数据库查询来更新排序顺序。我使用AJAX将表单中的排序顺序发送到update.php。然后我发回一些html像

<div class="alert alert-info">
    <strong>Sort Order Updated</strong>
</div>

我在div中显示成功消息，然后我想使用类似

的内容

document.getElementById('sortOrderInput')['sortorder'].value = "returnedvariable";

更新表单字段中的值。（注意：“returnedvariable”仅用于说明我想要$ _POST ['sortorder']中的值去哪里）

如果我控制台.log（数据）我目前看到html内容，我不能为我的生活弄清楚我应该如何返回一个变量。我是否将其作为包含两种数据类型的某种形式的数组，然后在

中引用它

.done(function(data) {

为清楚起见，我在这里添加我的整个脚本

$(document).ready(function() {
        var original_content = '';
        $('.sortOrder').submit(function(e){
            e.preventDefault();
            $.ajax({
                url: 'sort_order_update_ajax.php',
                type: 'POST',
                data: $(this).serialize(),
                dataType: 'html'
            })
           .done(function(data) {
               console.log(data);
               var elem = $('.sort-update');
               var original_content_qty = elem.html();
               elem.fadeOut('slow', function() {
                   elem.html(data).fadeIn('slow', function() {
                       elem.delay(1200).fadeOut('slow', function() {
                           elem.html(original_content_qty).fadeIn('slow');
                           //document.getElementById('sortOrderInput')['sortorder'].value = ?????;
                       });
                   });
               });
           })
           .fail(function(){
               alert('Ajax Submit Failed ...'); 
           });
       });
   });

sort_order_update_ajax.php文件包含

<?php require('includes/application_top.php');

if( $_POST ){
    $sort_order = $_POST['sortorder'];

    $sort_order = (int)$sort_order;
    if (is_int($sort_order)) { 
        $sql = "UPDATE " . TABLE_PRODUCTS . " SET sort_order = '" . $sort_order . "' WHERE products_id ='" . $_POST['products_id']. "'";
        $db->Execute($sql);
    }
?>
<div class="alert alert-info">
    <strong>Sort Order Updated</strong>
</div>

<?php 
}
require(DIR_WS_INCLUDES . 'application_bottom.php'); 
?>

Answer 1

根据您提供给我们的信息，我会回答这样的问题：

serverside（假设为PHP）

<?PHP
$data = array(
    'sortOrder' => $_POST['sortorder'],
    'asHtml' => '<div class="alert alert-info"><strong>Sort Order Updated</strong></div>',
);
header('Content-Type: application/json');
echo json_encode($data);

客户端（假设是javascript）

.done(function(data) {
  // show your confirmation div like before
  document.getElementById('confirmation').value = data.asHtml;
  document.getElementById('sortOrderInput')['sortorder'].value = data.sortOrder;
});

Answer 2

有多种方法可以做到这一点，但在我看来，最容易和最明显的是：从您的服务（服务器API），您可以返回这样的对象：

{
  sortOrder: <sort order value>,
  message: "Sort Order Updated"
}

然后，您可以将这些变量用作response.sortOrder和response.message。

希望这有帮助！如果您有疑问，请写下评论，而不是投票。：）

Answer 3

如果我正确理解你的问题，你试图将一个变量从ajax调用返回到父作用域（可能是全局作用域），以将其注入DOM。

这不容易弄清楚的原因是它是不可能的（至少在该语言的通用版本中）。 ajax调用无法返回数据，因为它异步处理http请求。您需要在.done回调中移动DOM注入代码，或者（最好）将DOM注入代码包装在从.done回调调用的另一个函数中。

理解AJAX和回调

3 个答案: