您的位置: 首页  >  文章  >  jquery与php交互之GET、 POST

jquery与php交互之GET、 POST

分类: 文章 • 2025-04-20 14:35:34

转自：http://blog.****.net/zhou_yujia/article/details/51606824#

GET:两个参数

html

[html] view plain copy print?jquery与php交互之GET、 POSTjquery与php交互之GET、 POST
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <script type="text/javascript" src="jquery-1.7.2.js"></script>  
  7.     <script type="text/javascript" src="jquery-1.7.2.min.js"></script>  
  8.     <script type="text/javascript">  
  9.         $(document).ready(function()  
  10.         {  
  11.             $("button").click(function()  
  12.             {  
  13.                 $.get(//使用get方法向服务器端获取数据  
  14.                         'check.php',  
  15.                         function (data) {  
  16.                             $("button").after(data);  
  17.                         }  
  18.                 );  
  19.             });  
  20.         });  
  21.     </script>  
  22. </head>  
  23. <body>  
  24.         <button>load some data</button>  
  25. </body>  
  26. </html>  

[php] view plain copy print?jquery与php交互之GET、 POSTjquery与php交互之GET、 POST
  1. <?php  
  2. /** 
  3.  * Created by PhpStorm. 
  4.  * User: admin-pc 
  5.  * Date: 2016/6/7 
  6.  * Time: 8:20 
  7.  */  
  8. if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])&&$_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest')  
  9.     echo 'successful';  
  10. else echo 'wrong';  
post：三个参数
[html] view plain copy print?jquery与php交互之GET、 POSTjquery与php交互之GET、 POST
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.    <!-- <style type="text/css">  
  7.         ul{border:1px solid black; list-style: none;margin:0pt;padding:0pt;float:left;  
  8.             font-family: Verdana,Arial,sans-serif;font-size: 12px;width: 400px;  
  9.         }  
  10.         li{padding:10px 5px;border-bottom: 1px solid black;}  
  11.         label{width: 100px;text-align: right;margin-right:10px;float:left; }  
  12.         #response{display: none;}  
  13.     </style>-->  
  14.     <script type="text/javascript" src="jquery.js"></script>  
  15.     <script type="text/javascript" src="jquery-1.7.2.js"></script>  
  16.     <script type="text/javascript" src="jquery-1.7.2.min.js"></script>  
  17.     <script type="text/javascript">  
  18.         $(document).ready(function()  
  19.         {  
  20.             $("input:button").click(function()//这里不可以用button标签写  
  21.             {  
  22.                 var data=$('form').serialize();  
  23.   
  24.                  $.post(  
  25.                          'process.php',// $("form").serialize(),  
  26.                          data,  
  27.                          function(data,status)  
  28.                          {  
  29.                              $('#information').hide();  
  30.                            //  alert("suce");  
  31.                           //   $("button").after(data);  
  32.                           //   $('#response').text($("form").serialize());  
  33.                              $('#response').html(data).show();//换成html的方式展示出，而text()函数只能直接输出，所以标签略过，换行符\n也不好使  
  34.                          //    alert(status);  
  35.                          },  
  36.                          'html'  
  37.                  );  
  38.   
  39. // console.log($("form").serialize());  
  40.             //   $("p").text(data);  
  41.             });  
  42.         });  
  43.     </script>  
  44. </head>  
  45. <body>  
  46.     <form action="">  
  47.         <ul  id="information">  
  48.             <li>  
  49.                 <label>email:</label>  
  50.                     <input type="text" name="email">  
  51.             </li>  
  52.             <li>  
  53.                 <label>full name</label>  
  54.                     <input type="text" name="fullname">  
  55.             </li>  
  56.             <li>  
  57.                 <label>sex</label>  
  58.                 <input type="radio" name="sex" value="male" checked="checked">male  
  59.                 <input type="radio" name="sex" value="female">female  
  60.             </li>  
  61.             <li>  
  62.                 <label>country</label>  
  63.                 <select name="country">  
  64.                     <option value="india">india</option>  
  65.                     <option value="uk">uk</option>  
  66.                     <option value="usa">usa</option>  
  67.                 </select>  
  68.             </li>  
  69.          <!--    -->  
  70.   
  71.         </ul>  
  72.    <!--     <button>go</button> -->  
  73.     </form>  
  74.     <input type="button" value="go" name="submit">  
  75.     <p id="response"></p>  
  76. </body>  
  77. </html>  
php
[php] view plain copy print?jquery与php交互之GET、 POSTjquery与php交互之GET、 POST
  1. <?php  
  2. /** 
  3.  * Created by PhpStorm. 
  4.  * User: admin-pc 
  5.  * Date: 2016/6/7 
  6.  * Time: 9:28 
  7.  */  
  8. header('Content-Type:text/html;charset=gb2312');  
  9. $responsestring="Dear ".$_POST['fullname'].",your contact information has been saved.";  
  10. $responsestring.="you entered the following information: ";  
  11. $responsestring.="<br/>";  
  12. $responsestring.="email:".$_POST['email'];  
  13. $responsestring.="<br/>";  
  14. $responsestring.=" sex:".$_POST['sex'];  
  15. $responsestring.="<br/>";  
  16. $responsestring.=" country".$_POST['country'];  
  17.   
  18. echo $responsestring;  

其实psot提交的也不一定是框框里你输入的对吧，也有可能是你点击的，比方说jquery与php交互之GET、 POST点击第一个显示下面的

[html] view plain copy print?jquery与php交互之GET、 POSTjquery与php交互之GET、 POST
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <script type="text/javascript" src="jquery.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function () {  
  9.             $('p').click(function(node){  
  10.                var data=$(this).text();//试了很多种方法，只有这种读取标签内容文本的方法可以读取从而选择我想要的  
  11.                // alert(data);  
  12.                 var tmp;  
  13.                 if(data=="MissZhou要努力1") tmp=1;  
  14.                 else if(data=="MissZhou要努力2") tmp=2;  
  15.                 else tmp=3;  
  16.               //  alert(tmp);  
  17.                 $.post('process.php',{name:tmp},function(dd){  
  18.                     $('div').html(dd).show();  
  19.                 });  
  20.             });  
  21.         });  
  22.     </script>  
  23. </head>  
  24. <body>  
  25.     <p name="name">MissZhou要努力1</p><br>  
  26.     <p name="name">MissZhou要努力2</p><br>  
  27.     <p name="name">MissZhou要努力3</p><br>  
  28.     <div></div>  
  29. </body>  
  30. </html>  
jquery与php交互之GET、 POST

[php] view plain copy print?jquery与php交互之GET、 POSTjquery与php交互之GET、 POST
  1. <?php  
  2. /** 
  3.  * Created by PhpStorm. 
  4.  * User: admin-pc 
  5.  * Date: 2016/6/10 
  6.  * Time: 16:08 
  7.  */  
  8. header('Content-Type:text/html;charset=utf-8');  
  9. $tmp=$_POST['name'];  
  10. if($tmp==1)  
  11.     echo "你不想找工作了吗?找不到工作喝西北风啊啊？！";  
  12. if($tmp==2)  
  13.     echo "就剩三个月了 玩什么玩 再玩就真玩完了";  
  14. if($tmp==3)  
  15.     echo "滚！去！学！习！";  
  16. //echo $tmp; 

相关推荐