您的位置：首页 > Web前端 > JQuery

jquery与php交互之GET、 POST

2016-06-07 21:37 387 查看
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;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航