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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
简述JS控制台的使用
Jul 15 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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极大的增强功能和性能
2006/10/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php数组合并的二种方法
2014/03/21 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
整理Python最基本的操作字典的方法
2015/04/24 Python
python实现批量监控网站
2016/09/09 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python实现图像全景拼接
2020/03/27 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
如何唤起类中的一个方法
2013/11/29 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
小学班主任事迹材料
2014/12/17 职场文书
评先进个人材料
2014/12/29 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers