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

jquery+ajax+php简单示例

2015-09-15 18:19 751 查看

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{
margin:0px;
padding:0px;
}

.main{text-align:center;width:1000px;margin:auto;}
.main form{margin-top:30px;}
.main input{width:200px;height:36px;}
.main table tr th{width:100px;height:56px;border:1px solid black;}
.main table tr td{width:300px;height:56px;border:1px solid black;}
.tip_more{color:black;}
.tip_erro{color:red;}
.tip_right{color:green;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
function onFocus(input){
switch(input.id){
case 'name':
$('#'+input.id+'_p').html("*<span>此处填写用户名</span>");
$('#'+input.id+'_p').attr("class", "tip_more");
break;
case 'age':
$('#'+input.id+'_p').html("*<span>此处填写年龄</span>");
$('#'+input.id+'_p').attr("class", "tip_more");
break;
}

}

function onBlur(input){
switch(input.id){
case 'name':
//alert(input.value.trim());
if(input.value.trim()==''){
$('#'+input.id+'_p').html("*<span>请输入用户名</span>");
$('#'+input.id+'_p').attr("class", "tip_erro");
} else {

$('#'+input.id+'_p').html("*<span>正确</span>");
$('#'+input.id+'_p').attr("class", "tip_right");
}
break;
case 'age':
//alert(input.value.trim());
if(input.value.trim()==''){
$('#'+input.id+'_p').html("*<span >请输入用户年龄</span>");
$('#'+input.id+'_p').attr("class", "tip_erro");
} else {

$('#'+input.id+'_p').html("*<span >正确</span>");
$('#'+input.id+'_p').attr("class", "tip_right");
}
break;
}

}
//$(function(){
$(document).ready(function(){
$("#check").click(function(){
var name=$('#name').val();
//alert(name);
$.ajax({
url: "check.php",    //请求的url地址
dataType: "json",   //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: {
"name": name
},    //参数值
type: "POST",   //请求方式
beforeSend: function() {
//请求前的处理
},
success: function(data) {
if (data.success) {
alert(data.msg);
} else {
alert(data.msg);
}
},
complete: function() {
//请求完成的处理
},
error: function(e) {
//请求出错处理
alert('ajax hava an error'+e.status);
}
});
});
});
</script>
</head>
<body>
<div class="main">
<h1>表单demo</h1>
<form method="post"  id="apply_form"  action="list.php">

<table width="100%"  border="0" cellpadding="0" cellspacing="0">
<tr>
<th>用户 </th>
<td>
<input id="name" onblur="onBlur(this);" onfocus="onFocus(this);" type="text" name="name"/>
</td>
<td>
<input id="check"  type="button" name="check" value="检测用户名"/>
</td>
<td class="padding3"><p id='name_p' ></p></td>
</tr>
<tr>
<th>年龄 </th>
<td>
<input id="age" onblur="onBlur(this);" onfocus="onFocus(this);" type="text" name="age"/>
</td>
<td class="padding3"><p id='age_p' ></p></td>
</tr>
</table>
</form>
</div>
</body>
</html>

check.php
<?php

$name=$_POST['name'];
if($name =="hello")
{
echo '{"success":false,"msg":"用户名重复"}';
}
else{
echo '{"success":true,"msg":"可以使用"}';
}

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航