小试了下AJAX，感觉比prototype简洁多了，在JQuery中，AJAX有三种实现方式：$.ajax(),$.post,$.get()。 XHTML(主要): <div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div> <form id="formtest" action="" method="post"> <p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p> <p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p> <p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p> <p><span>输入工作:</span><input type="text" name="job" id="input4" /></p> </form> <button id="send_ajax">提交</button> <button id="test_post">POST提交</button> <button id="test_get">GET提交</button> JS: 1、引入jquery框架： <script type="text/javascript" src="../js/jquery.js"></script> 2、构建AJAX，JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了，可以直接封装在JS文件中： <script type="text/javascript"> //$.ajax()方式 $(document).ready(function (){ $('#send_ajax').click(function (){ //直接把onclick事件写在了JS中，而不需要混在XHTML中了 var params=$('input').serialize(); //序列化表单的值，与prototype中的form.serialize()相同 $.ajax({ url ：'ajax_test.php', //后台处理程序 type:'post', //数据发送方式 dataType:'json', //接受数据格式 data:params, //要传递的数据 success:update_page //回传函数(这里是函数名) }); }); }); function update_page (json) { //回传函数实体，参数为XMLhttpRequest.responseText var str="姓名:"+json.username+"<br />"; str+="年龄:"+json.age+"<br />"; str+="性别:"+json.sex+"<br />"; str+="工作:"+json.job; $("#result").html(str); } //$.post()方式： $(function (){ //$(document).ready(function (){ 的简写 $('#test_post').click(function (){ $.post('ajax_test.php', {username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()}, function (data){ //回传函数 var myjson=''; eval('myjson='+data+';'); $('#result').html("姓名:"+myjson.username+"<br />工作:"+myjson['job']); }); }); }); //$.get()方式： $(function (){ $('#test_get').click(function (){ $.get('ajax_test.php', {username:$("#input1").val(),age:$("#input2").val(),sex:$("#input3").val(),job:$("#input4").val()}, function (data) { var myjson=''; eval("myjson="+data+";"); $("#result").html(myjson.job); }); }); }); </script> PHP代码： <?php $arr=$_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST $myjson=json_encode($arr); echo $myjson; ?>

　　推荐阅读

　　JQuery 绑定事件时传递参数的实现方法

如题，比如我想在$(":text").bind("keyup",funcionName);将当前的文本框作为参数传递给 functionName所代表的函数，应该怎么写？试了一 下$(":text").bind("keyup",functionName(this));这样是不对的! 1.直接在fun>>>详细阅读

本文标题：jquery 框架使用教程 AJAX篇

地址：http://www.17bianji.com/kaifa2/JS/27994.html

 1/2    1