jquery, php开发 
2 Comments JQuery发送Ajax请求
先看一下界面:
首先写一个简单的前端界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery.js">
</script>
</head>
<body>
<div >
<input type="text" name="username" value="" placeholder="用户名.."><span id="sp"></span>
</div>
</body>
<script>
$('input:text').blur(function(){ //当input表框失去焦点的时候的
var url = './1.php?name=' +this.value;//用get的方式把name值从地址栏上传过去
$.get(url,function(res){//直接用$.get(url,function(res){});注:res是php输出的结果
//console.log(res);
if(res == 1){
//$('div').append('<span style="color:red">用户名已存在</span>');可以实现但是会重复加span,建议不用次方法
$('#sp').html('<font color="red">用户名已存在</font>')
}else{
//$('div').append('<span style="color:green">用户名ok</span>');
$('#sp').html('<font color="green">用户名ok</font>')
}
});
});
</script>
</html>
在1.php中
<?php
$name = $_GET[‘name’];
echo in_array($name,array('zhangsan','lisi','wangwu'))?1:0;
?>
若要用post请求就简单的写一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery.js">
</script>
</head>
<body>
<form action="1.php">
<p><input type="text" name="username" value="" placeholder="用户名.."></p>
<p><input type="text" name="pwd" value="" placeholder="密码.."></p>
<p><input type="submit" name="" value="提交"></p>
</form>
</body>
<script>
$('form').submit(function(){
var url = 'post.php';
var data = {
'u' : $('input[name=”username”]').val(),
'p' : $('input[name=”pwd”]').val()
};
$.post(url,data,function(res){
alert(res);
});
return false;//一定加上,false,防止跳转
});
</script>
</html>
在1.php中写:
<?php
print_r($_POST);
?>
666