我如何使用Ajax和Jquery将数据加载到div中，然后插入表单数据并将数据重新加载到div中？

Question

我已经努力解决了几个星期。 任何帮助，将不胜感激。 我想使用Jquery和Ajax创建一个Div元素，以显示客户购物篮中的项目数。 页面加载后，我希望Div显示“您的购物篮中有0件商品”。 当用户单击添加按钮时，数据将发送到PHP页面，以便将项目添加到数据库。 然后在另一页上运行行计数（然后将显示购物篮中的项目数）。 将代码分解成各个部分时，我可以很容易地使代码运行，但是将代码编译并添加到一起后，第一次单击“ Div”不会刷新。 第二次单击时，它可以正常工作。 我查看了Google Chrome浏览器开发人员工具，发现该代码正在按我的期望和预期工作。 我希望这很简单，但却使我发疯。

附言：我的表格目前正在使用名称字段，与添加到购物篮功能无关。 一旦代码生效，我将对此进行修改。

简而言之，我想：1）页面加载后将数据加载到div。 2）当用户单击提交按钮时，将数据插入到MySQL表中。3）将数据重新加载到div中。

<script>
    $(function(){   
 $.ajaxSetup({ cache: false });     
 $("#get_data").load("../admin/data.php");//load initial page

 $("#button1").click(function(){//when clicked insert data intoo DB and reload the page
 $.post( "insert_data.php", $( "#name" ).serialize() ); 
    $.ajax({
    url: "../admin/data.php",
    cache:false,
            })
.done(function( html ) {
$( "#get_data" ).append( html ); //show the data in the get_data div        
        });// close done function
        $( "#get_data" ).empty();

    }); 
});

User Name<br/>
<input class="form-control" name="name" type="text" id="name" placeholder="Enter Your User Name" autofocus/><br>

<input class="btn btn-blk navbar-btn" type="button" id="button1" value="Add Name To DB" /><br>

Answer 1

我将尝试帮助清理一下。

准备好文档后，您想加载一些初始数据（我认为其中包括购物车中的内容）。 到目前为止没有问题； $("#get_data").load("../admin/data.php"); 可能正在工作。

当用户单击按钮时，您希望对服务器进行请求。 您的代码中有2个请求（其中一个没有方法，我认为jQuery默认为GET ）。 我建议合并这些调用，以便$.post()的响应返回要追加的必要HTML。

$('#button1').on('click', function(e){
    $.post("insert_data.php", $("#name").serialize()).done(function(html){
        $("#get_data").append( html );
    });
});

当然，要正常工作，您需要更改PHP代码以在查询后回显相应的HTML，但我认为问题之一可能是GET可能在POST完成处理之前完成，从而返回值太快。