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 相关文章推荐
javascript的函数
Jan 31 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python的语言类型(详解)
2017/06/24 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python 变量类型详解
2018/10/10 Python
在python里面运用多继承方法详解
2019/07/01 Python
keras导入weights方式
2020/06/12 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
银行领导证婚词
2014/01/11 职场文书
普通党员对照检查材料
2014/08/28 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015年保管员工作总结
2015/04/30 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers