jquery+ajax简单的例子

来源：互联网发布：淘宝联名精英版白金卡编辑：程序博客网时间：2024/05/01 00:26

<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",//处理提交的urltype:"POST",//提交方式data:{'search':name},//提交的数据，其实就是search=namebeforeSend: 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");//阻止提交并返回falsecheck.preventDefault();return false;            },            success:function(data)             {                 alert(data+"123");check.preventDefault();            },             error: function(){                alert('error');check.preventDefault();           }            });}});});