jQuery页面刷新(局部、全部)问题分析


Posted in Javascript onJanuary 09, 2016

本文实例分两部分对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()刷新最顶端对象(用于多开窗口)

以上就是本文的详细内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
Javascript基础教程之变量
Jan 18 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
JavaScript电子时钟倒计时
Jan 09 #Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 #Javascript
学习JavaScript设计模式之状态模式
Jan 08 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
PHP实现简单登录界面
2019/10/23 PHP
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python数据类型详解(二)列表
2016/05/08 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
上班睡觉检讨书
2014/01/09 职场文书
大学生志愿者感言
2014/01/15 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2014年租房协议书范本
2014/10/30 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书