您的位置:68399皇家赌场 > 服务器租用 > 兑现类似facebook无刷新ajax更新

兑现类似facebook无刷新ajax更新

发布时间:2019-05-19 19:27编辑:服务器租用浏览(139)

    $(".editbox").change(function()
    {
    $('.edit').hide();
    var boxval = $(".editbox").val();
    var dataString = 'data=' boxval;
    $.ajax({
    type: "POST",
    url: "update_profile_ajax.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $('.text_wrapper').html(boxval);
    $('.text_wrapper').show();

    jQuery 版本 get_web.php

    waterfall 瀑布流网页实现的设计方案一:Masonry(含loading三回后边世分页)

    PHP code
    <?php
    /**
     * 程序入口
     */
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    www.68399.com,<link rel='stylesheet' type='text/css教程' href='./styles/ui.all.css' />
    <link rel='stylesheet' type='text/css' href='./styles/fullcalendar.css' />
    <link rel='stylesheet' type='text/css' href='./styles/eat.css' />
    <script type='text/javascript' src='./scripts/jquery.js'></script>
    <script type='text/javascript' src='./scripts/jquery-ui-1.7.2.custom.js'></script>
    <script type='text/javascript' src='./scripts/fullcalendar.js'></script>
    <script type='text/javascript' src='./scripts/eat.js'></script>
    </head>
    <body>
    <button id="maintain">加人</button>
    <div id='calendar' class="wrapper"></div>
    </body>
    </html>

    <script type="text/javascript">
    $(document).ready(function()
    {

    <?php
    header("Content-type: text/html; charset=utf-8");
    if(!empty($_POST['input_text'])) {
    ini_set('default_socket_timeout', 10);
    if(!$data = file_get_contents($_POST['input_text'])) {
    echo "Time out!";
    return ;
    }
    $charset_pos = stripos($data,'charset');
    if($charset_pos) {
    if(stripos($data,'utf-8',$charset_pos)) {
    echo iconv('utf-8','utf-8',$data);
    }else if(stripos($data,'gb2312',$charset_pos)) {
    echo iconv('gb2312','utf-8',$data);
    }else if(stripos($data,'gbk',$charset_pos)) {
    echo iconv('gbk','utf-8',$data);
    }
    return;
    }
    echo $data;
    }else {
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <title>Get Web Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <script type="text/javascript" src=";
    <script type="text/javascript">
    $(document).ready(function(){
    $(document).keyup(function(e){
    e = e || window.event;
    if(e.keyCode == 13 && $("#input_text").val() != '') {
    $(".button_box").click();
    }
    });
    $(".button_box").click(function(){
    if($("#input_text").val() == '') {
    $("#input_text").addClass('errorTips').focus();
    return false;
    }else {
    $("#input_text").removeClass('errorTips');
    }
    $.ajax({
    url: '<?php echo $_SERVER['PHP_SELF'] ?>',
    data: 'input_text=' $("#input_text").val(),
    type:'POST',
    success:function(msg){
    $(".html_tips").show();
    $("#origin_website").attr('href',$("#input_text").val());
    $("#back_a").attr('href',document.location.href);
    $("#click_show").show();
    $("#output_page_html").empty().val(msg).css({height:parseInt($(document).height()-100)}).show();
    $("#output_page").empty().html(msg).show();
    }
    });
    });
    });
    </script>
    <style>
    .div_box{
    margin-top:10px;
    }
    .input_box{
    border:1px solid;
    margin-left:10px;
    margin-top:2px;
    height:15px;
    float:left;
    size:32
    font-size: 14px;
    }
    .button_box{
    float:left;
    height:23px;
    padding-bottom:3px;
    }
    .hide_box{
    display:none;
    }
    .a_box{
    margin-left:10px;
    margin-top:3px;
    height:15px;
    float:left;
    font-size: 14px;
    }
    .clear_box{
    height:50px;
    }
    .error_tips{
    border:1px solid red;
    }
    #output_page_html{
    width:960px;
    margin:0 auto;
    }
    .html_tips{
    float: left;
    margin: 0 21px;
    font-size:1.8em;
    }
    </style>
    </head>
    <body>
    <div class="div_box">
    <input id="input_text" class="input_box" type="text" value=""></input>
    <input type="button" class="button_box" value="Get it!" ></input>
    <div id="click_show" class="hide_box">
    <a id="origin_website" class="a_box" href="#" target="_black">访问原站</a>
    <a id="back_a" class="a_box" href="#">后退</a>
    </div>
    </div>
    <div class="clear_box"></div>
    <div class="html_tips hide_box">站点</div>
    <div id="output_page"></div>
    <div class="html_tips hide_box">站点源码</div>
    <textarea id="output_page_html" class="hide_box"></textarea>
    </body>
    </html>
    <?php
    }
    //End_php

    二、php端代码:
    lists-ajax-{$catid}-{$page}-’ nextpage ’-' per_count ’.html
    多少个参数分别对应:$_GET['catid'],$_GET['page'],$_GET['sub_page'],$_GET['per_page']

    数据库教程创建:

    $('.edit_link').click(function()
    {
    $('.text_wrapper').hide();
    var data=$('.text_wrapper').html();
    $('.edit').show();
    $('.editbox').html(data);
    $('.editbox').focus();
    });

    <?php
    header("Content-type: text/html; charset=utf-8");
    if(!empty($_POST['input_text'])) {
    ini_set('default_socket_timeout', 10);
    if(!$data = file_get_contents($_POST['input_text'])) {
    echo "Time out!";
    return ;
    }
    $charset_pos = stripos($data,'charset');
    if($charset_pos) {
    if(stripos($data,'utf-8',$charset_pos)) {
    echo iconv('utf-8','utf-8',$data);
    }else if(stripos($data,'gb2312',$charset_pos)) {
    echo iconv('gb2312','utf-8',$data);
    }else if(stripos($data,'gbk',$charset_pos)) {
    echo iconv('gbk','utf-8',$data);
    }
    return;
    }
    echo $data;
    }else {
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <title>Get Web Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <script type="text/javascript">
    function createXMLHTTP()
    {
    try
    {
    var request = new XMLHttpRequest();
    }
    catch(e1)
    {
    var arrVersions = ["Microsoft.XMLHTTP","MSXML2.XMLHttp.4.0",
    "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.5.0"];
    for(var i=0;i < arrVersions.length;i ){
    try{
    request = new ActiveXObject(arrVersions[i]);
    }catch(e2){
    request = false;
    }
    }
    }
    return request;
    }
    function ajax_post(url, params, target_id)
    {
    request = new createXMLHTTP();
    request.onreadystatechange = function() {
    if (this.readyState == 4)
    if (this.status == 200)
    if (this.responseText != null)
    document.getElementById(target_id).innerHTML = this.responseText;
    }
    request.open("POST", url, true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-length", params.length);
    request.setRequestHeader("Connection", "close");
    request.send(params);
    }
    var checked = false;
    function check_(value) {
    checked = value;
    }
    function get_key(event) {
    event = event || window.event;
    if(event.keyCode==13 && checked != false)
    {
    var url = document.getElementById('input_text').value;
    if(url != '') {
    get_page();
    }else {
    document.getElementById('input_text').onfocus();
    return false;
    }
    }
    }
    function get_page() {
    var url = document.getElementById('input_text').value;
    if(!url) {
    return false;
    }else {
    if(document.getElementById('output_page').innerHTML != '') {
    document.getElementById('output_page').innerHTML = '';
    }
    }
    if(url.indexOf('http://') == -1) {
    url = ';
    }
    ajax_post(
    '<?php echo $_SERVER['PHP_SELF']; ?>',
    'input_text=' url,
    'output_page'
    );
    document.getElementById('click_show').style.display = 'block';
    document.getElementById('back_a').href = document.location.href;
    document.getElementById('origin_website').href = url;
    }
    </script>
    <style>
    .div_box{
    margin-top:10px;
    }
    .input_box{
    border:1px solid;
    margin-left:10px;
    margin-top:2px;
    height:15px;
    float:left;
    size:32
    font-size: 14px;
    }
    .button_box{
    float:left;
    height:23px;
    padding-bottom:3px;
    }
    .hide_box{
    display:none;
    }
    .a_box{
    margin-left:10px;
    margin-top:3px;
    height:15px;
    float:left;
    font-size: 14px;
    }
    .clear_box{
    height:50px;
    }
    </style>
    </head>
    <body onkeydown="get_key(event)">
    <div class="div_box">
    <input id="input_text" class="input_box" type="text" value="" onclick="check_(true)" onblur="check_(false)"></input>
    <input type="button" class="button_box" onclick="get_page()" value="Get it!" ></input>
    <div id="click_show" class="hide_box">
    <a id="origin_website" class="a_box" href="#" target="_black">访问原站</a>
    <a id="back_a" class="a_box" href="#">后退</a>
    </div>
    </div>
    <div class="clear_box"></div>
    <div id="output_page"></div>
    </body>
    </html>
    <?php
    }
    //End_php

     代码如下

     

    $(document).mouseup(function()
    {
    $('.edit').hide();
    $('.text_wrapper').show();
    });

    看点:
    1、file_get_contents超时间调控制。
    贰、页面编码决断。
    3、键盘Enter键捕捉响应。
    四、键盘event包容管理。//event = event || window.event;
    五、XMLHttpRequest 和 jQuery 二种达成方案。
    六、页面及源码同时展现。
    XMLHttpRequest版本 get_web.php

    瀑布流设计已经不是怎么异样的事物了,未来互连网基于瀑布流的网页非平日见,这种规划能给浏览器者更加直白更有成效的浏览体验。
    那么大家能够什么在此以前端、后端合作去实现这种功用呢?

    PHP code
    <?php
    require_once './Entity.php';

    update_profile_ajax.php

    复制代码 代码如下:

    jquery.min.js 及 masonry.pkgd.min.js请自行下载。

    表现全体用户的视图: viewUsers.php

    <?php

    作者:Zjmainstay

    ...
    ...
    //loading 5 次,出现分页!
    $loading_times = 5;
    $sub_page = (int)$_GET['sub_page'];
    $page_c = $sub_page;
    $page = (int)$_GET['page'];
    if($page==0) {
        $page = 1;
    }
     
     
    $sub_page = $sub_page ($page-1)*$loading_times;
    $limit = (int)$_GET['limit'];
     
     
    $sql = ".....";
    //这里根据实际sql语句询问出结果数组,请依据自身的系列写好。
    $datas = getRowset($sql,' a.id asc ', $sub_page, $limit,10,$urlrule); 
    //再次来到的结果数组应该包涵:
    //壹.当前页的loading page:$sub_page,二.总记录数:total_count,3.总页数:total_pages,四.结出数组 datas
    $result['stat']='ok';
    $result['photos']['page']=$sub_page;
    $result['photos']['pages']=$datas['total_pages'];
    $result['photos']['perpage']=$limit;
    $result['photos']['total']=$datas['total_count'];
    $result['photos']['photo']=$datas['datas'];
    //这里是获取分页代码的str,请留心这里的$limit*$loading_times 这么些参数
    $datas_tmp = getRowset($sql,' a.id asc ', $page, $limit*$loading_times,10,$urlrule);
    $result['photos']['pages_str']=$datas_tmp['pages_str'];
     
    //上边是组装重临的字符串!供前端的js获取使用
    $str='<div id="thumbs">';
    foreach($result['photos']['photo'] as $k=>$r) {
        $str.=" <div class="imgbox" itemscope itemtype=" href="".$r['url']."" title="".$r['desc'].""><img src="".$r['thumb']."" alt="".$r['desc']."" itemprop="contentURL" /></a><span class="img_user" itemprop="author"><a href="".$r['url']."">".$r['desc']."</a></span><span class="img_time" itemprop="datePublished">@<time datetime="".date('Y-m-d H:i:s',$r['inputtime'])."" itemprop="datePublished">".date('Y-m-d H:i:s',$r['inputtime'])."</time></span></div>";
    }
    $page_c ;
    $str.="<div id="next_page"><a href="/lists-ajax1-{$catid}-{$page}-{$page_c}-{$limit}.html">下一页</a></div><div id="sub_page">{$page_c}</div><div id="current_page">{$page}</div><div id="total_page">".$result['photos']['pages']."</div><div id="page_str">".$result['photos']['pages_str']."</div></div>";
     
     
    echo $str;die;

     

    复制代码 代码如下:

    复制代码 代码如下:

    waterfall瀑布流网页实现的设计方案一:Masonry

    /**
     * 插入一条预定就餐记录
     * @param $user_id
     * @param $food
     * @return unknown_type
     */
    function addItem($user_id, $food, $ordertime) {
        $util = new Mysql();
        $year = date('Y', $ordertime);
        $month = date('n', $ordertime);
        $day = date('j', $ordertime);
        $hour = (date('G', $ordertime) 8) % 24;
        $flag = $hour < 13;
        $item = getItemByTimeAndUser($year, $month, $day, $flag, $user_id);
        $ordertime = "$year-$month-$day $hour:00:00";
        $item && ($item = $item[0]) && ($flag = $flag ? ' < ' : ' >= ');
        return $item
                ? $util->execute("UPDATE ITEM SET FOOD = '$food' WHERE USER_ID = $user_id AND YEAR(ORDER_TIME) = $year AND MONTH(ORDER_TIME) = $month AND DAY(ORDER_TIME) = $day AND HOUR(ORDER_TIME) $flag 13")
                : $util->execute("INSERT INTO ITEM(USER_ID, FOOD, ORDER_TIME) VALUES($user_id, '$food', '$ordertime')");
    }

    复制代码 代码如下:

    您恐怕感兴趣的篇章:

    • AJAX 动态获取当前时间(php)
    • ajax获取php页面包车型客车回到参数,控件赋值的情势
    • 用PHP获取谷歌(Google) AJAX Search API 数据的代码
    • PHP Ajax JavaScript Json获取气候音信完成代码
    • php获取ajax的headers方法与内容实例
    • php ajax达成无刷新动态加载数据才具
    • php基于jquery的ajax技艺传递json数据轻易实例
    • ajax管理php再次来到json数据的实例代码
    • Ajax php数据交互并且有个别刷新页面包车型大巴贯彻详解
    • PHP ajax达成获取情报数据轻便示例

    复制代码

    }
    ?>

    }
    });

    复制代码

    /**
     * 根据id修改姓名
     * @param $id
     * @param $name
     * @return unknown_type
     */
    function updateUser($id, $name) {
        $util = new Mysql();
        return $util->execute("UPDATE USER SET NAME = '$name' WHERE ID = $id");
    }

    });
    </script>
    <style type="text/css">
    body
    {
    font-family:Arial, Helvetica, sans-serif;

    复制代码

    /**
     * 用户实体类
     * @author selfimpr
     * @blog
     * @email lgg860911@yahoo.com.cn
     *
     */
    class User extends Entity {
        private $id;
        private $name;
       
        public function User($id = NULL, $name = NULL) {
            $this->id = $id;
            $this->name = $name;
        }
       
        public function getId() {
            return $this->id;
        }
        public function setId($id) {
            $this->id = $id;
            return $this;
        }
        public function getName() {
            return $this->name;
        }
        public function setName($name) {
            $this->name = $name;
            return $this;
        }
    }
    ?>

    你或者感兴趣的小说:

    • Ajax局部更新导致JS事件再一次触发难题的消除措施
    • Ajax异步无刷新对一些数据更新
    • ajax页面无刷新 IE下蒙受Ajax缓存导致数据不立异的主题材料
    • ajax上传时参数提交不更新等连锁主题素材
    • ajax异步刷新完毕立异数据库
    • Jquery专门的学问常用实例 使用AJAX使网页实行异步更新
    • ajax更新数据后,jquery、jq失效难点
    • Ajax格局完成按期更新页面某块内容的措施

    急需:瀑布流输出,loading 5 次后出现分页,每一回loading 10个内容。

    /**
     * 测试用例7: 获取某天中午或深夜预定就餐
     */
    //var_dump(getItemsByTime(2010, 6, 4, false));

    www.68399.com 1

    复制代码

    丰盛用户的Ajax接口: addUser.php

    $(".editbox").mouseup(function()
    {
    return false
    });

     

    /**
     * 本程序工作逻辑之下部分的单元测试
     * @author selfimpr
     * @blog
     * @email lgg860911@yahoo.com.cn
     */

    <div class="edit" style="display:none"><textarea class="editbox" cols="23" rows="3" name="profile_box"></textarea></div>
    </div>

    二、php端代码:/lists-ajax1-{$catid}-{$page}-2-12.html
    那边的八个参数分别对应:$_GET['catid'],$_GET['page'],$_GET['sub_page'],$_GET['limit']

    • 1) '月' t.getDay() '日' (t.getHours() > 13 ? '下午' : '上午') ']----你想吃什么呀?',
                          width: 1000,
                          close: function() {
                              $(this).dialog('destroy').remove();
                          },
                          buttons: {
                              '正是关的时候方便点1': function() {
                                  $(this).dialog('close');
                              },
                              '正是关的时候方便点二': function() {
                                  $(this).dialog('close');
                              },
                              '正是关的时候方便点三': function() {
                                  $(this).dialog('close');
                              }
                          }
                      });
                  });
              }
             
          });
          /**
           * 修改当天的DOM, 加明显标记
           */
          $('.fc-today').append('<div style="margin-top: 40px; color: #88893三; font-size: 20px; font-weight: bold;">这里是后天</div>');
          /**
           * 加人按钮, 用来加载用户管理分界面
           */
          $('#maintain').bind('click', function(event) {
              $('<div>').load('./viewUsers.php', function() {
                  $(this).dialog({
                      resizable: false,
                      modal: true,
                      title: '嘿嘿, 吃着喝着啊',
                      width: 1128,
                      height: 450,
                      close: function() {
                          $(this).dialog('destroy').remove();
                      },
                      buttons: {
                          '就是关的时候方便点壹': function() {
                              $(this).dialog('close');
                          },
                          '就是关的时候方便点2': function() {
                              $(this).dialog('close');
                          },
                          '就是关的时候方便点三': function() {
                              $(this).dialog('close');
                          },
                          '就是关的时候方便点四': function() {
                              $(this).dialog('close');
                          }
                      }
                  });
                  bindMaitainArea(this);
              });
          });
          /**
           * 用户管理分界面加载完毕之后, 对其上的按键绑定事件
           */
          var bindMaitainArea = (function(context) {
              /**
               * 新扩张用户的风浪
               */
              $('#new_user', context).bind('click', function(event) {
                  var self = this;
                  $.ajax({
                      type: 'POST',
                      url: './addUser.php',
                      data:'name=' $('#new_user_input').val(),
                      timeout:8000,
                      async: false, 
                      success: function(res) {
                          $(self).parents('.ui-dialog-content').load('./viewUsers.php', function() {
                              bindMaitainArea();
                          });
                      }
                  });
              });

    }
    .edit_link
    {
    float:right
    }
    .editbox
    {
    overflow: hidden; height: 61px;border:solid 1px #0099CC; width:190px; font-size:12px;font-family:Arial, Helvetica, sans-serif; padding:5px
    }
    </style>
    <div class="mainbox">
    <a href="#" class="edit_link" title="Edit">Edit</a>
    <?php
    include("db.php");
    $sql=mysql_query("select email from users where user_id='1'");
    $row=mysql_fetch_array($sql);
    $profile=$row['email'];
    ?>
    <div class="text_wrapper" style=""><?php echo $profile; ?></div>

     

    系统的输入: index.php

    if($_POST['data'])
    {
    $data=$_POST['data'];
    $data = mysql_escape_String($data);
    $sql = "update users set email='$data' where user_id='1'";
    mysql_query( $sql);
    }
    ?>

    上边包车型地铁例证基于phpcms

     

    });

    一、html代码:

    PHP code
    <?php
    require_once './bussiness.php';

    font-size:12px;
    }
    .mainbox
    {
    width:250px;
    margin:50px;
    }
    .text_wrapper
    {
    border:solid 1px #0099CC;
    padding:5px;
    width:187px;

    waterfall瀑布流网页完结的设...

    /**
     * 提交1个电话订餐请求的ajax地址
     */
    echo (string)addItem($userId, $food, $t);
    ?>

    jquery就算不是必须的,可是为了有利于,我们依旧用上jquery吧。

    电话订餐订单项类: Item.php

    jquery尽管不是必须的,然而为了方便,大家如故用上jquery吧。

            /**
             * 删除用户的风云
             */
            $('.ctrl-del-user', context).bind('click', function(event) {
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: './delUser.php',
                    data:'id=' $(self).parents('.ctrl-record').attr('userId'),
                    timeout:8000,
                    async: false, 
                    success: function(res) {
                        $(self).parents('.ui-dialog-content').load('./viewUsers.php', function() {
                            bindMaitainArea();
                        });
                    }
                });
            });
        });
    });

     代码如下

     

    急需:瀑布流输出,loading 5 次后出现分页,每一次loading 11个内容。

    /**
     * 获取某天上午或早上的预定就餐
     * @param $year
     * @param $month
     * @param $day
     * @param $flag 上午true下午false
     * @return unknown_type
     */
    function getItemsByTime($year, $month, $day, $flag) {
        $util = new Mysql();
        $flag = $flag ? ' < ' : ' >= ';
        $item_datas = $util->execute("SELECT ITEM.*, USER.NAME FROM ITEM JOIN USER ON ITEM.USER_ID = USER.ID WHERE YEAR(ORDER_TIME) = $year AND MONTH(ORDER_TIME) = $month AND DAY(ORDER_TIME) = $day AND HOUR(ORDER_TIME) $flag 13");
        if(empty($item_datas)) return array();
        foreach($item_datas as $index => $data) {
            $item = new Item();
            $items[$data['USER_ID']] = $item->setId($data['ID'])
                            ->setUser(new User($data['USER_ID'], $data['NAME']))
                            ->setFood($data['FOOD'])
                            ->setOrderTime(date($data['ORDER_TIME']));
        }
        return $items;
    }

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:兑现类似facebook无刷新ajax更新

    关键词: 68399皇家赌场

上一篇:vs二〇〇八 神速替换 使用正则表明式

下一篇:没有了