jquery与php交互之GET、 POST

来源：互联网发布：三公经费软件编辑：程序博客网时间：2024/05/29 16:37

GET:两个参数

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="jquery-1.7.2.js"></script>    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>    <script type="text/javascript">        $(document).ready(function()        {            $("button").click(function()            {                $.get(//使用get方法向服务器端获取数据                        'check.php',                        function (data) {                            $("button").after(data);                        }                );            });        });    </script></head><body>        <button>load some data</button></body></html>

<?php/** * Created by PhpStorm. * User: admin-pc * Date: 2016/6/7 * Time: 8:20 */if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])&&$_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest')    echo 'successful';else echo 'wrong';

post：三个参数

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>   <!-- <style type="text/css">        ul{border:1px solid black; list-style: none;margin:0pt;padding:0pt;float:left;            font-family: Verdana,Arial,sans-serif;font-size: 12px;width: 400px;        }        li{padding:10px 5px;border-bottom: 1px solid black;}        label{width: 100px;text-align: right;margin-right:10px;float:left; }        #response{display: none;}    </style>-->    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript" src="jquery-1.7.2.js"></script>    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>    <script type="text/javascript">        $(document).ready(function()        {            $("input:button").click(function()//这里不可以用button标签写            {                var data=$('form').serialize();                 $.post(                         'process.php',// $("form").serialize(),                         data,                         function(data,status)                         {                             $('#information').hide();                           //  alert("suce");                          //   $("button").after(data);                          //   $('#response').text($("form").serialize());                             $('#response').html(data).show();//换成html的方式展示出，而text()函数只能直接输出，所以标签略过，换行符\n也不好使                         //    alert(status);                         },                         'html'                 );// console.log($("form").serialize());            //   $("p").text(data);            });        });    </script></head><body>    <form action="">        <ul  id="information">            <li>                <label>email:</label>                    <input type="text" name="email">            </li>            <li>                <label>full name</label>                    <input type="text" name="fullname">            </li>            <li>                <label>sex</label>                <input type="radio" name="sex" value="male" checked="checked">male                <input type="radio" name="sex" value="female">female            </li>            <li>                <label>country</label>                <select name="country">                    <option value="india">india</option>                    <option value="uk">uk</option>                    <option value="usa">usa</option>                </select>            </li>         <!--    -->        </ul>   <!--     <button>go</button> -->    </form>    <input type="button" value="go" name="submit">    <p id="response"></p></body></html>

php

<?php/** * Created by PhpStorm. * User: admin-pc * Date: 2016/6/7 * Time: 9:28 */header('Content-Type:text/html;charset=gb2312');$responsestring="Dear ".$_POST['fullname'].",your contact information has been saved.";$responsestring.="you entered the following information: ";$responsestring.="<br/>";$responsestring.="email:".$_POST['email'];$responsestring.="<br/>";$responsestring.=" sex:".$_POST['sex'];$responsestring.="<br/>";$responsestring.=" country".$_POST['country'];echo $responsestring;

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">        $(document).ready(function () {            $('p').click(function(node){               var data=$(this).text();//试了很多种方法，只有这种读取标签内容文本的方法可以读取从而选择我想要的               // alert(data);                var tmp;                if(data=="MissZhou要努力1") tmp=1;                else if(data=="MissZhou要努力2") tmp=2;                else tmp=3;              //  alert(tmp);                $.post('process.php',{name:tmp},function(dd){                    $('div').html(dd).show();                });            });        });    </script></head><body>    <p name="name">MissZhou要努力1</p><br>    <p name="name">MissZhou要努力2</p><br>    <p name="name">MissZhou要努力3</p><br>    <div></div></body></html>

<?php/** * Created by PhpStorm. * User: admin-pc * Date: 2016/6/10 * Time: 16:08 */header('Content-Type:text/html;charset=utf-8');$tmp=$_POST['name'];if($tmp==1)    echo "你不想找工作了吗?找不到工作喝西北风啊啊？！";if($tmp==2)    echo "就剩三个月了 玩什么玩 再玩就真玩完了";if($tmp==3)    echo "滚！去！学！习！";//echo $tmp;

0 0