Question

我一直在努力解决这个问题几周。任何帮助，将不胜感激。我想使用Jquery和Ajax创建一个Div元素来显示客户篮子中的项目数。当页面加载时，我希望Div显示“你的篮子包含0项”。当用户单击添加按钮时，数据将被发送到PHP页面，以便将项目添加到数据库中。然后在另一个页面上运行行计数（然后将显示篮子中的项目数）。我可以轻松地将代码分解为单个部分时运行，但是当编译并添加在一起时，代码不会在第一次单击按钮时刷新Div。第二次点击它工作正常。我查看了Google Chromes开发人员工具，可以看到代码正在按照我的意愿和期望运行。我希望这很简单，但它让我很生气。

P.s我的表单目前正在使用名称字段，与添加到购物篮功能无关。一旦我的代码工作，我将修改这个。

简而言之，我想： 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之前完成1}}完成处理，从而过快地返回值。

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

1 个答案: