jquery与php交互之GET、 POST

最新推荐文章于 2024-07-31 00:21:52 发布

MissZhou要努力

最新推荐文章于 2024-07-31 00:21:52 发布

阅读量4.5k

点赞数 1

分类专栏： PHP 前端文章标签： jquery html

本文链接：https://blog.csdn.net/zhou_yujia/article/details/51606824

版权

PHP 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

前端

21 篇文章 0 订阅

订阅专栏

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;