</br>
HTML
<meta charset="utf-8" />
<title>
ajax test
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
jQuery(function($) {
$('button').click(function() {
var name = $(this).attr('name');
$.ajax({
url: "hello.php",
type: "POST",
data: {
'search': name
},
beforeSend: function() {
alert("this is before send");
},
success: function(data) {
alert(data + "123");
},
error: function() {
alert('error');
}
});
//$('#out').empty().load('test1.php',{ name : $name });
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="btn-1" name="1">
1
</button>
<button id="btn-2" name="2">
2
</button>
<button id="btn-3" name="3">
3
</button>
<div id="out">
</div>
</body>
</html>
</br>
PHP
<?php
echo "this is php file it will deal the request from js";
?>
</br>
点击按钮，然后按钮绑定的jquery事件处理请求
$.ajax({
url: "hello.php",
//处理提交的url
type: "POST",
//提交方式
data: {
'search': name
},
//提交的数据，其实就是search=name
beforeSend: function() {
//提交的数据前做一些操作
alert("this is before send");
},
success: function(data) {
//提交的数据成功后的一些操作，比如这里的data就是来自
//后端php脚本返回的结果
alert(data + "123");
},
error: function() {
//提交失败，可能原因，超时，或者后台处理脚本不存在
alert('error');
}
});
</br>
</br>
</br>
</br>
再来一个form的东西
HTML
<meta charset="utf-8" />
<title>
ajax test
</title>
<script type="text/javascript" src="./js/jquery/jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(":submit[id=submit_act]").click(function(check) {
var first_name = $(":text[name=fname]").val();
alert(first_name);
if (first_name == "") {
alert("error");
check.preventDefault();
return false;
} else {
$.ajax({
url: "hello.php",
type: "POST",
data: {
'search': first_name
},
beforeSend: function() {
alert("this is before send");
check.preventDefault();
return false;
},
success: function(data) {
alert(data + "123");
check.preventDefault();
},
error: function() {
alert('error');
check.preventDefault();
}
});
}
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form name="postform" method="post" action="./hello.php">
First name:
<input type="text" name="fname" />
second name:
<input type="text" name="sname" />
<input type="submit" name="submit_act" value="submit" id="submit_act">
</form>
<div id="out">
</div>
</body>
</html>
</br>
新的PHP
<?php
if($_POST['search']=="xluren")
echo "this is php file it will deal the request from js";
else
echo "i do not know ur name";
?>
</br>
一些注解：
$(document).ready(function() {
//通过ID获取按钮，然后绑定一个点击事件
$(":submit[id=submit_act]").click(function(check) {
var first_name = $(":text[name=fname]").val(); //获取输入名字
alert(first_name);
//提交前的判断，如果为空，那么就阻止提交
if (first_name == "") {
alert("error");
check.preventDefault(); //阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
return false;
} else {
$.ajax({
url: "hello.php",
//处理表单的后台脚本
type: "POST",
//提交方式
data: {
'search': first_name
},
//提交的数据
beforeSend: function() {
//提交前做一些操作
//我看到一个wordpress的theme主要是用来改变一些UI
alert("this is before send");
//阻止提交并返回false
check.preventDefault();
return false;
},
success: function(data) {
alert(data + "123");
check.preventDefault();
},
error: function() {
alert('error');
check.preventDefault();
}
});
}
});
});
</br>
</br>
</br>
源码来源：http://blog.csdn.net/xluren/article/details/17020341
