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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
Prototype Template对象 学习
Jul 19 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
小程序云开发之用户注册登录
May 18 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使用base64加密解密图片示例分享
2014/01/20 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
工程业务员岗位职责
2013/12/31 职场文书
教育孩子心得体会
2014/01/01 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
Python 正则模块详情
2021/11/02 Python
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电