注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Copper peas ' Bolg

Keep On Moving...This Is My Life...

 
 
 

日志

 
 

【原】最完善,最彻底的 jquery ajax 案例  

2011-03-02 23:00:02|  分类: php |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
以前使用过jquery ajax 但没有系统的学习,很多东西有点混乱,特别是调用的各种方式
今天晚上花了2个小时,参考了部分资料,加以自己的经验总结
写了这个案例,相信大家看了以后会有更加深入的了解。
复制代码直接可以使用
writer:copperpeas
http://csq-3.blog.163.com/blog/static/387384392011221102278/
静态页面:juqery.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> jquery-test 最完善的jquery ajax 案例</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="http://csq-3.blog.163.com/blog/js/jquery-1.5.1.js"></script>
 <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $("#backmsgbefore").click(function() {
        $("#backmsg").html('Hello world!');
        });
 

        //$.get()方式:
        $("#backmsgbeforea").click(function ()
        {
            $.get(
              'backmsg.php',
              {
                username:$("#input1").val(),
                age:$("#input2").val(),
                sex:$("#input3").val(),
                job:$("#input4").val()
              },
              function(data) //回传函数
              {
                //alert(data);
                var obj = eval("(" + data + ")");
                //alert(obj.username)
                $("#backmsga").html(obj.username);
                var str="";
                for(var v in obj)
                {
                   /*这是递归出属性值*/               
                   str = str+obj[v];                                     
                }
                alert(str);
              }
            );
         });

         //$.post()方式:
        $("#backmsgbeforeb").click(function ()
        {
            $.post(
              'backmsg.php',
              {
                username:$("#input1").val(),
                age:$("#input2").val(),
                sex:$("#input3").val(),
                job:$("#input4").val()
              },
              function(data) //回传函数
              {
                //alert(data);
                var obj = eval("(" + data + ")");
                //alert(obj.username)
                $("#backmsgb").html(obj.username);
                var str="";
                for(var v in obj)
                {
                   /*这是递归出属性值*/               
                   str = str+obj[v];                                     
                }
                alert(str);
               }
            );
         });

         //统一调用格式 如果是get可以在url跟参数params为空即可
         $('#backmsgbeforec').click(function (){
              var params=$('input').serialize(); //序列化表单的值
               $.ajax({
               url:'backmsg.php', //后台处理程序
               type:'post',         //数据发送方式
               dataType:'json',     //接受数据格式
               data:params,         //要传递的数据
               success:backmsg //回传函数(这里是函数名)
             });
           });

         

    });

    //在ajax包含外面写函数
    function backmsg(data) //回传函数
    {
                //注意:这里回传的已经是json对象所以不需要eval转换了,直接输出即可
                var obj = data;
                //alert(obj.username)
                $("#backmsgc").html(obj.username);
                var str="";
                for(var v in obj)
                {
                   /*这是递归出属性值*/               
                   str = str+obj[v];                                     
                }
                alert(str);
    }
    //-->
 </script>
 </head>
 <body>
 <div id="backmsgbefore">
   点击获取返回信息
 </div>
 <div id="backmsg">显示在此处</div>
 <!----------------------------------------------------->
 <div id="backmsgbeforea">
   点击获取ajax get 返回信息
 <p><span>输入姓名:</span><input type="text" name="username" id="input1" value="cwh"/></p>
 <p><span>输入年龄:</span><input type="text" name="age" id="input2" value="25"/></p>
 <p><span>输入性别:</span><input type="text" name="sex" id="input3" value="男"/></p>
 <p><span>输入工作:</span><input type="text" name="job" id="input4" value="PHP工程师"/></p>
 </div>
 <div id="backmsga">显示在此处</div>
 <!----------------------------------------------------->
 <div id="backmsgbeforeb">
   点击获取ajax post 返回信息
 <p><span>输入姓名:</span><input type="text" name="username" id="input5" value="cwha"/></p>
 <p><span>输入年龄:</span><input type="text" name="age" id="input6" value="25a"/></p>
 <p><span>输入性别:</span><input type="text" name="sex" id="input7" value="男a"/></p>
 <p><span>输入工作:</span><input type="text" name="job" id="input8" value="PHP工程师a"/></p>
 </div>
 <div id="backmsgb">显示在此处</div>
 <!----------------------------------------------------->
 <div id="backmsgbeforec">
   点击获取ajax post 另外的方式 返回信息
 <p><span>输入姓名:</span><input type="text" name="username" id="input9" value="cwhab"/></p>
 <p><span>输入年龄:</span><input type="text" name="age" id="input10" value="25ab"/></p>
 <p><span>输入性别:</span><input type="text" name="sex" id="input11" value="男ab"/></p>
 <p><span>输入工作:</span><input type="text" name="job" id="input12" value="PHP工程师ab"/></p>
 </div>
 <div id="backmsgc">显示在此处</div>
 </body>
</html>

writer:copperpeas
http://csq-3.blog.163.com/blog/static/387384392011221102278/
服务器页面 backmsg.php  这个是别人写好了
<?php
/* writer:copperpeas time:2011-3-2
 * jquery ajax backmsg.page
 */
//$arr = $_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
$arr = $_REQUEST;
$arr['append'] = '测试字符串';
//print_r($arr);
$myjson = my_json_encode($arr);
echo $myjson;

function my_json_encode($phparr)
{
    if(function_exists("json_encode"))
    {
      return json_encode($phparr);
    }
   // php低版本没有自带那个函数
    else
    {
      require_once 'json/json.class.php'; //这个文件phpcms的include下有
      $json = new Services_JSON;
      return $json->encode($phparr);
    }
}     
?>
  评论这张
 
阅读(276)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018