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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
Vue组件开发初探
Feb 14 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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
php设计模式之简单工厂模式详解
2014/09/04 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
jquery中动态效果小结
2010/12/16 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
Python中的pprint折腾记
2015/01/21 Python
简单讲解Python中的闭包
2015/08/11 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
快递业务员岗位职责
2014/01/06 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
卫生巾广告词
2014/03/18 职场文书
开工典礼策划方案
2014/05/23 职场文书
求职信名称怎么写
2014/05/26 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android