• 基于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; ?>
  • 相关阅读:
    让unidac支持加密的sqlite
    hook api 保护进程
    Delphi实现网页采集
    UNIDAC
    Delphi的视频捕获组件
    删除程序自身
    一种简单的自校验的注册码生成方案以及暗桩方法
    SQL server表字段信息说明
    淘宝API开发(一)简单介绍淘宝API功能接口作用
    淘宝API开发(二)淘宝API接口功能测试
  • 原文地址:https://www.cnblogs.com/fengju/p/6174049.html
Copyright © 2020-2023  润新知