jQuery $.post()方法的用法

$.get() 方法和 $.post() 方法在使用方式上差不多，不过两者还是有一定的区别：

接下来举一个例子，首先我们需要准备两个文件：一个是扩展名为 php 的文件，另一个是扩展名为 html 的文件。

扩展名为 php 的文件代码如下：

 ?php 

 header( Content-Type:text/html; charset=utf-8 

 echo div >

扩展名为 html 的文件代码如下：


 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 style type= text/css 

 .item h4{margin:5px;background-color:#F1F1F1;}

 .item p{margin:0;text-indent:2em;}

 /style 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function(){

 $( #send ).click(function(){

 $.post( get.php , { 

 username : $( #name ).val() , 

 content : $( #content ).val() 

 }, function (data, textStatus){

 $( #comment ).html(data); // 把返回的数据添加到页面上

 /script 

 /head 

 body 

 form 

 fieldset 

 legend 小伙伴们，快快到碗里来！ /legend 

 p label 昵称: input id= name type= text / /label /p 

 p label 内容: textarea name= content id= content rows= 4 cols= 30 /textarea /label /label /p 

 p input id= send type= button value= 提交 / /p 

 /fieldset 

 /form 

 h3 已有评论： /h3 

 div id= comment /div 

 /body 

 /html 

预览效果如图 1 所示。




图 1：默认效果

我们在表单中输入内容，点击【提交】按钮后，就会将表单内容通过 Ajax 传给后端服务器，结果如图 2 所示。




图 2：提交内容后的效果

上面这个例子与 $.get() 方法的例子是一样的，只不过我们这里是使用 $.post() 方法来实现的。

 
23902.html
 

 CSShtmljavaJavaScriptphp