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

Bioinformatics home

 
 
 

日志

 
 

PHP JQUEYR AJAX  

2009-06-28 10:32:30|  分类: PHP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

js文件

<html>
<head>
<title>PHP  jQuery Ajax 实例演示</title>
</head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function () 

   $('#send_ajax').click(function (){ 
     var params=$('input').serialize(); //序列化表单的值 
     $.ajax({ 
        url='ajax_json.php', //后台处理程序 
       type:'post',         //数据发送方式 
       dataType:'json',     //接受数据格式  text/plain     
       data:params,         //要传递的数据  传递数据格式就是传统的  ?x=22&yy=99
       //contentType: "application/json; charset=utf-8", //如果params用json格式需要这样定义 传给服务器的数据格式
       success:update_page  //回传函数(这里是函数名)  调用回传函数 此函数默认调用了回传的参数     
      /*  或许可以这样
        success: function(data) {      
              data是个JSON格式的数据
            update_page (data) ;
        },
            error: function() {
                     alert("程序错误,请再度试验或上报!");
                  }
        */
      
     }); 
   }); 
  
  
  
  //$.post()方式: 
  $('#test_post').click(function (){ 
    $.post( 
      'ajax_json.php', 
      { 
        username:$('#input1').val(), 
        age:$('#input2').val(), 
        sex:$('#input3').val(), 
        job:$('#input4').val() 
      }, 
      function (data) //回传函数 
      { 
        var myjson='';   
        eval("myjson=" + data + ";");  //虽然服务器段已经按照json格式回传,但还是得转化数据为json格式,
        update_page (myjson) ;
      } 
    ); 
   }); 
  //$.get()方式: 
  $('#test_get').click(function () 
  { 
    $.get( 
      'ajax_json.php', 
      { 
        username:$("#input1").val(), 
        age:$("#input2").val(), 
        sex:$("#input3").val(), 
        job:$("#input4").val() 
      }, 
      function(data) //回传函数 
      { 
        var myjson=''; 
        eval("myjson=" + data + ";");  //虽然服务器段已经按照json格式回传,但还是得转化数据为json格式,
        update_page (myjson) ;
      } 
    ); 
  }); 
}); 
function update_page (json)  //回传函数实体,参数为XMLhttpRequest.responseText 

  var str="姓名:"+json.username+"<br />"; 
  str+="年龄:"+json.age+"<br />"; 
  str+="性别:"+json.sex+"<br />"; 
  str+="工作:"+json.job+"<br />";  
  $("#result").html(str); 

</script>
<body>
  <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></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>
</body>
</html>

服务器端代码

<?php
//方法 1
  //$arr = $_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
  $arr = $_REQUEST;
  $arr["username"]=$arr["username"]."yy";
  echo json_encode($arr);  //得用json格式封装回传,否则js收到的是文本
?>

<?php
//方法 2
//$arr = $_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
 $arr = $_REQUEST;
  $peoples=array('xm'=>'name','xb'=>'sex','mz'=>'nation','cs'=>'birth');
   echo json_encode( $peoples);
?>

 

 

  评论这张
 
阅读(1407)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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