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方法和技巧大全
Dec 27 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
JavaScript门道之标准库
May 26 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
vue实现表格过滤功能
Sep 27 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 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 正则 过滤html 的超链接
2009/06/02 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
实现Python与STM32通信方式
2019/12/18 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
领导干部廉政自律承诺书
2014/05/26 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
客服专员岗位职责
2015/02/10 职场文书
会计简历自我评价
2015/03/10 职场文书
对学校的意见和建议
2015/06/04 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书