jquery+ajax简单的例子
<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>
hello.php
<?php
echo "this is php file it will deal the request from js";
?>点击按钮，然后按钮绑定的jquery事件处理请求，jquery真的很简单的，尤其对于我这种需要写简单页面，但是没有学过js的菜鸟
$.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');
}
});-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
再来一个form的东西
<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>
新的hello.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";
?>
一些自己的注解：
$(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();
}
});
}
});
});