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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 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 安全过滤函数代码
2011/05/07 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
《开国大典》教学反思
2014/04/19 职场文书
小学数学课后反思
2014/04/23 职场文书
员工考核评语大全
2014/04/26 职场文书
保护环境的标语
2014/06/09 职场文书
课外活动总结范文
2014/07/09 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
鼋头渚导游词
2015/02/05 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS