[英]Adding rows to MySQL db and showing DIVs with jQuery without refreshing a page
I am using some PHP script to add some data from a complex form to MySQL db and then showing it all in some HTML table. 我正在使用一些PHP脚本将复杂形式的一些数据添加到MySQL数据库,然后将它们全部显示在某些HTML表中。 Everything works just fine, but I would like to 'upgrade' my script with jQuery and (I suppose) AJAX. 一切正常,但我想使用jQuery和AJAX(我想)“升级”脚本。
What I would like to do is when user submits data, the row (or <div>
) shows up in the HTML table without refreshing a page. 我想做的是,当用户提交数据时,该行(或<div>
)显示在HTML表中,而无需刷新页面。 Form and table are on same page, of course... 表格和表格在同一页面上,当然...
Some guidelines would be really helpful because I'm not sure should I even use AJAX or something else for my needs. 一些准则确实会很有帮助,因为我不确定我是否应该使用AJAX或其他某种方式满足我的需求。 Links for some tutorials will be also great :) 一些教程的链接也很好:)
Thanks a lot for any help! 非常感谢您的帮助!
An easy way to do this is using jQuery POST method 一种简单的方法是使用jQuery POST方法
http://api.jquery.com/jQuery.post/ http://api.jquery.com/jQuery.post/
When the user submits the data, you use jQuery to post the data to a PHP handler, which saves the data to the database and returns a HTML formatted row to add to your table. 当用户提交数据时,您使用jQuery将数据发布到PHP处理程序,该处理程序将数据保存到数据库并返回HTML格式的行以添加到表中。
Here's a good example: http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form-submit-examples-with-php/comment-page-1/ 这是一个很好的例子: http : //www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form-submit-examples-with-php/comment-page-1/
I had used this tutorial to implement a comment system on one of my projects. 我使用本教程在我的一个项目上实现了评论系统。 It uses ajax and works really well. 它使用ajax并确实运行良好。 I believe that this is what you need. 我相信这就是您所需要的。
You'll need: 你需要:
A php page where to submit the form. 提交表单的php页面。 Ideally this page will return the result as a JSON object (PHP has some handy JSON functions to convert PHP arrays and objects directly to a proper JSON string). 理想情况下,此页面将结果作为JSON对象返回(PHP具有一些方便的JSON函数,可将PHP数组和对象直接转换为正确的JSON字符串)。 Don't forget to include some error information in the JSON object you return. 不要忘记在返回的JSON对象中包含一些错误信息。 This can have the form: 可以采用以下形式:
{ "errorCode": 0, "result": { "var1": value1, "var2": value2 } } {“ errorCode”:0,“ result”:{“ var1”:value1,“ var2”:value2}}
Some javascript to submit the form. 一些JavaScript提交表格。 This can be done nicely with jQuery.ajax
, jQuery.post
or jQuery.get
functions. 使用jQuery.ajax
, jQuery.post
或jQuery.get
函数可以很好地做到这一点。
Some javascript to handle the result from the PHP script. 一些JavaScript处理PHP脚本的结果。 This will be a callback function that you give to the jQuery.ajax
, jQuery.post
or jQuery.get
functions. 这将是您提供给jQuery.ajax
, jQuery.post
或jQuery.get
函数的jQuery.get
函数。 This script will either: 该脚本将:
jQuery("#error").html("My error message");
) 向用户显示错误(您可以在div中设置一些文本,例如使用jQuery("#error").html("My error message");
) jQuery.append
and jQuery.html
functions. 您可以使用jQuery.append
和jQuery.html
函数动态构建HTML元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.