zoukankan      html  css  js  c++  java
  • jQuery页面刷新(局部、全部)问题分析

    本文实例分两部分对jquery刷新问题进行介绍,第一部分介绍了呢页面局部刷新;第二部分介绍了页面全部刷新
    第一:页面局部刷新

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是laod()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。
    重点分析load()方法通常用来从Web服务器上获取静态的数据文件.要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法$.ajax方法

    load() Code
    //无参数传递,则是GET方式
    $("#resText").load("test.php",function(){
    //......
    });
     
    //有参数传递,则是POST方式
    $("#resText").load("test.php",{name:"xht555",age:"24"},function(){
    //......
    });
     

    简单说一下 post 与get 区别:

    get:用get方式可传送简单数据(即:浏览器将各个表单字段元素及其数据按照URL参数的格式附加在url后面),但大小一般限制在1KB下;被客户端的浏览器缓存起来,不安全。

    post:览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,  

    总结:

    一:GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。 

    二:AJAX乱码问题 
    产生乱码的原因: 
    1、xtmlhttp 返回的数据默认的字符编码是utf-8,如果客户端页面是gb2312或者其它编码数据就会产生乱码 
    2、post方法提交数据默认的字符编码是utf-8,如果服务器端是gb2312或其他编码数据就会产生乱码

    解决办法有: 
    1、若客户端是gb2312编码,则在服务器指定输出流编码

    2、服务器端和客户端都使用utf-8编码

    gb2312:header('Content-Type:text/html;charset=GB2312');

    utf8:header('Content-Type:text/html;charset=utf-8');

    注 意:如果你已经按上面的方法做了,还是返回乱码的话,检查你的方式是否为get,对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经 encodeURIComponent方法处理.如果没有用encodeURIComponent处理的话,也会产生乱码 

    $.post() Code
     
    //$.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 + ';');
        $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);
       }
      );
      });
     
     
     
    $.get() Code
    //$.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 + ";");
         $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);
       }
      );
    });
     
     
    });
     
    $.getJson(”Default.php”, {id:”1″, page: “2″ },
    function(data){
    //注意,这里返回的JSON数据格式,不同于xml.
    });
     

    第二:页面全部刷新

    • 1 window.location.reload()刷新当前页面.
    • 2 parent.location.reload()刷新父亲对象(用于框架)
    • 3 opener.location.reload()刷新父窗口对象(用于单开窗口)
    • 4 top.location.reload()刷新最顶端对象(用于多开窗口)
  • 相关阅读:
    这是阿里技术专家对 SRE 和稳定性保障的理解
    阿里四年技术 TL 的得失总结:如何做好技术 Team Leader
    深度 | 阿里云蒋江伟:什么是真正的云原生?
    亲历者说 | 完整记录一年多考拉海购的云原生之路
    Seata RPC 模块的重构之路
    对容器镜像的思考和讨论
    20 行代码:Serverless 架构下用 Python 轻松搞定图像分类和预测
    怎么提升写代码的能力
    云原生 DevOps 的 5 步升级路径
    dubbo-go 白话文 | 从零搭建 dubbogo 和 dubbo 的简单用例
  • 原文地址:https://www.cnblogs.com/sjqq/p/6373638.html
Copyright © 2011-2022 走看看