基于JQuery框架的AJAX

基于JQuery框架的AJAX/



jquery这个类库相当不错...简单..功能还强大



在JQuery中，AJAX有三种实现方式：$.ajax(),$.post,$.get()。



XHTML(主要):

<div id="result" style="background:orange;border:1px solid red;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=
___FCKpd___0
POST; //若以$.get()方式发送数据，则要改成
___FCKpd___0
GET.或者干脆:
___FCKpd___0
REQUEST

$myjson=json_encode($arr); 

echo $myjson;

?>