Question

我正在显示来自DB的数据：

<?php foreach ($r as $k => $v):?>
    <div data-role="collapsible" data-mini="true" class="collapsible">
        Name: <?=$v['name']?>
    </div>
<?php endforeach; ?>

现在，当我向数据库添加新数据并提交表单时，我的脚本会重定向回到此页面。如何在不手动刷新浏览器的情况下立即显示新数据？如果我不使用Jquery Mobile，我通常不会遇到这个问题。

Answer 1

您可以使用jquery ajax发送表单

$('form[name="myform"]').submit(function(evt){
    evt.preventDefault();

    $.post('/my_form_handler.php', $(this).serialize())
          .done(function(data){
              //Populate dom elements here with new data
          }).fail(function(data){
              //Handle failed ajax post.
          }); 
});

然后成功发布更改dom元素的内容。

不是100％肯定我有正确的语法，但我认为它应该给你一个关于如何做的一般概念。

Answer 2

这里的问题是数据被硬编码到页面的HTML中。表单提交后，jQueryMobile正在更改页面/视图，并且不会刷新页面，因此您仍然可以看到相同的数据。

您应该重构以使用JSON数据创建循环（通过AJAX加载）。如果数据缓存在局部变量中，您可以使用表单的数据添加数据，或者对服务器进行新的AJAX调用（如果需要排序或过滤，建议使用）。

重新加载数据后，可以调用呈现代码，显示新列表。

Answer 3

很容易。您可以使用ajax将请求发送到服务器。在服务器端，您必须使该函数返回添加的数据。 ajax函数将获得成功或失败功能。如果成功，它将运行。

在成功函数上，你必须使用javascript jquery和返回的数据添加内容。

由于

Jquery Mobile：将数据添加到数据库后显示新数据而不刷新

3 个答案: