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

I have been struggling for a couple of weeks trying to solve this. Any help would be appreciated. I would like to use Jquery and Ajax to create a Div element to show the number of items that are in a customers basket. When the page loads I would like the Div to show "Your basket contains 0 items". As the user clicks the add button the data is sent to a PHP page to so that an item is added to the database. Then a row count is run on another page (which will then show the number of items in the basket). I can easily to get the code to run when breaking it down into individual parts, but when complied and added together the code does not refresh the Div the first time button is clicked. When clicked the second time it works fine. I have looked at Google Chromes developer tools and can see that the code is working as I would like and expect. I am hoping it is something simple but it is driving me mad.

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

P.s My form is using a name field at the moment and does not relate to the add to basket function. I will amend this once I have the code working.

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

In a nutshell I would like to: 1) load data to a div once the page has loaded. 2) When a user clicks the submit button insert data into a MySQL table 3) Reload the data into the div.

简而言之,我想: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>

1 个解决方案

#1

I'm going to try and help clean this up a bit.

我打算尝试帮助清理一下。

When the document is ready, you want to load some initial data (which I assume includes the cart contents). No problem so far; $("#get_data").load("../admin/data.php"); is probably working.

文档准备好后,您想要加载一些初始数据(我假设包含购物车内容)。到目前为止没问题; $( “#GET_DATA”)负载( “../管理员/ data.php”);可能正在工作。

When the user clicks a button you want a request to be made to the server. You have 2 requests in your code (one of them doesn't have a method, I think jQuery default is GET). I would recommend combining these calls, so the response of the $.post() returns the necessary HTML to append.

当用户单击按钮时,您希望向服务器发出请求。你的代码中有2个请求(其中一个没有方法,我认为jQuery默认是GET)。我建议组合这些调用,因此$ .post()的响应返回要附加的必要HTML。

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

Of course for that to work, you'd need to change your PHP code to echo the appropriate HTML after the query but I assume one of the problems might be that the GET might finish before POST is done processing, thereby returning the value too quickly.

当然,要实现这一点,您需要更改PHP代码以在查询后回显相应的HTML但我认为其中一个问题可能是在完成POST处理之前GET可能完成,从而过快地返回值。

#1